Toggle Group

A group of toggle buttons with shared variant and size context. Supports single-select and multi-select modes. Built on Radix UI ToggleGroup.

Built on Radix UI.

✓type='single' enforces at most one item active at a time
✓type='multiple' allows any number of items to be active
✓variant and size propagate from ToggleGroup to all child ToggleGroupItems
✓Individual items can override variant and size from context
✓Controlled via value/onValueChange or uncontrolled via defaultValue
✓Full keyboard navigation — arrow keys move between items

import { Toggle Group }from "@aetherstack/ui"

toggle group.tsx

import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"
import { AlignLeft, AlignCenter, AlignRight } from "lucide-react"

export function ToggleGroupDemo() {
  return (
    <ToggleGroup type="single" defaultValue="center">
      <ToggleGroupItem value="left" aria-label="Align left">
        <AlignLeft />
      </ToggleGroupItem>
      <ToggleGroupItem value="center" aria-label="Align center">
        <AlignCenter />
      </ToggleGroupItem>
      <ToggleGroupItem value="right" aria-label="Align right">
        <AlignRight />
      </ToggleGroupItem>
    </ToggleGroup>
  )
}

Usage

Single select

type='single' — only one item can be active at a time. Ideal for exclusive options like text alignment.

Multiple select

type='multiple' — any number of items can be active simultaneously. Ideal for text formatting options.

Outline variant

Set variant='outline' on ToggleGroup to apply it to all items at once.

Props

Prop	Type	Default	Description

ToggleGroup

Prop	Type	Default	Description
type	"single" \| "multiple"	—	Selection mode. Required. single allows one active item; multiple allows any number.
value	string \| string[]	—	Controlled active value(s). String for single, string[] for multiple.
defaultValue	string \| string[]	—	Uncontrolled initial active value(s).
onValueChange	(value: string \| string[]) => void	—	Callback when the active value(s) change.
variant	"default" \| "outline"	"default"	Visual style applied to all child ToggleGroupItems.
size	"default" \| "sm" \| "lg"	"default"	Size applied to all child ToggleGroupItems.

ToggleGroupItem

Prop	Type	Default	Description
value	string	—	Unique identifier for this item within the group. Required.
variant	"default" \| "outline"	—	Overrides the variant from ToggleGroup context for this item only.
size	"default" \| "sm" \| "lg"	—	Overrides the size from ToggleGroup context for this item only.
disabled	boolean	false	Disables this item independently of the group.

* Required props

Accessibility

→Has role='group' — screen readers announce it as a toolbar group.
→Each item has role='radio' (single) or role='checkbox' (multiple) with aria-checked.
→Always provide aria-label on icon-only ToggleGroupItems.
→Arrow keys move focus between items; Space or Enter toggles the focused item.
→Disabled items are skipped during keyboard navigation.