Toggle Group

A set of two-state buttons that can be toggled on or off. Toggle buttons share outer rounded corners with sharp inner corners, creating a seamless single-button appearance.

Props

ToggleGroup

Prop	Type	Default	Description
`etype`	`'single' \| 'multiple'`	`'single'`	Selection behavior
`variant`	`'primary' \| 'secondary' \| 'ghost'`	`'primary'`	Visual style passed to items
`size`	`'sm' \| 'base' \| 'lg'`	`'base'`	Size passed to items
...Radix props	`ComponentProps<typeof ToggleGroupPrimitive.Root>`	-	All Radix group props

ToggleGroupItem

Prop	Type	Default	Description
inherits	`variant`, `size` from group	-	Styling context from parent
...Radix props	`ComponentProps<typeof ToggleGroupPrimitive.Item>`	-	All Radix item props

Multiple buttons can be active at once with etype="multiple".

Variants

Primary (Default)

Selected: option-1

<ToggleGroup variant="primary" type="multiple" size="sm">
  <ToggleGroupItem value="option-1">1</ToggleGroupItem>
  <ToggleGroupItem value="option-2">2</ToggleGroupItem>
  <ToggleGroupItem value="option-3">3</ToggleGroupItem>
</ToggleGroup>

Secondary

Selected: option-1

<ToggleGroup variant="secondary" type="multiple" size="sm">
  <ToggleGroupItem value="option-1">1</ToggleGroupItem>
  <ToggleGroupItem value="option-2">2</ToggleGroupItem>
  <ToggleGroupItem value="option-3">3</ToggleGroupItem>
</ToggleGroup>

Ghost

Selected: option-1

<ToggleGroup variant="ghost" type="multiple" size="sm">
  <ToggleGroupItem value="option-1">1</ToggleGroupItem>
  <ToggleGroupItem value="option-2">2</ToggleGroupItem>
  <ToggleGroupItem value="option-3">3</ToggleGroupItem>
</ToggleGroup>

Single Selection

Selected: center

const [value, setValue] = useState("center");

<ToggleGroup variant="primary" type="single" size="sm" value={value} onValueChange={setValue}>
  <ToggleGroupItem value="left"><AlignLeft className="size-3" /></ToggleGroupItem>
  <ToggleGroupItem value="center"><AlignCenter className="size-3" /></ToggleGroupItem>
  <ToggleGroupItem value="right"><AlignRight className="size-3" /></ToggleGroupItem>
  <ToggleGroupItem value="justify"><AlignJustify className="size-3" /></ToggleGroupItem>
</ToggleGroup>

Only one button can be active at a time with etype="single".

With Icons

Selected: list

const [value, setValue] = useState(["view-1"]);

<ToggleGroup variant="primary" type="multiple" size="sm" value={value} onValueChange={setValue}>
  <ToggleGroupItem value="list"><List className="size-3" /></ToggleGroupItem>
  <ToggleGroupItem value="grid"><Grid className="size-3" /></ToggleGroupItem>
  <ToggleGroupItem value="folder"><Folder className="size-3" /></ToggleGroupItem>
</ToggleGroup>

Toggle group with icon content.

Disabled State

Selected: None

<ToggleGroup variant="primary" type="multiple" size="sm">
  <ToggleGroupItem value="option-1">1</ToggleGroupItem>
  <ToggleGroupItem value="option-2" disabled>2</ToggleGroupItem>
  <ToggleGroupItem value="option-3">3</ToggleGroupItem>
</ToggleGroup>