Toggle Group

A set of two-state buttons grouped together. Built on the Radix UI Toggle Group primitive.

<ToggleGroup type="single" defaultValue="bold" aria-label="Text formatting">  <ToggleGroupItem value="bold" aria-label="Toggle bold">    <TextB />  </ToggleGroupItem>  <ToggleGroupItem value="italic" aria-label="Toggle italic">    <TextItalic />  </ToggleGroupItem>  <ToggleGroupItem value="underline" aria-label="Toggle underline">    <TextUnderline />  </ToggleGroupItem></ToggleGroup>

Usage

import { ToggleGroup, ToggleGroupItem } from "@reva/ui";

ToggleGroup shares the Toggle variant ramp (solid / subtle (default) / outline) and the Button size ramp (xs / sm / default / lg). Items inherit variant and size from the group via context; per-item overrides on ToggleGroupItem are accepted as a fallback. Borders and corners merge between siblings to match Button Group.

Composition

Use the following composition to build a ToggleGroup:

ToggleGroup
├── ToggleGroupItem
├── ToggleGroupItem
└── ToggleGroupItem

Examples

Single

Only one item can be pressed at a time. Set type="single".

<ToggleGroup type="single" defaultValue="left" variant="outline" aria-label="Text alignment">  <ToggleGroupItem value="left" aria-label="Align left">    <TextAlignLeft />  </ToggleGroupItem>  <ToggleGroupItem value="center" aria-label="Align center">    <TextAlignCenter />  </ToggleGroupItem>  <ToggleGroupItem value="right" aria-label="Align right">    <TextAlignRight />  </ToggleGroupItem></ToggleGroup>

Multiple

Any combination of items can be pressed. Set type="multiple".

<ToggleGroup type="multiple" defaultValue={["bold", "italic"]} aria-label="Text formatting">  <ToggleGroupItem value="bold" aria-label="Toggle bold">    <TextB />  </ToggleGroupItem>  <ToggleGroupItem value="italic" aria-label="Toggle italic">    <TextItalic />  </ToggleGroupItem>  <ToggleGroupItem value="underline" aria-label="Toggle underline">    <TextUnderline />  </ToggleGroupItem></ToggleGroup>

Variants

<ToggleGroup type="single" defaultValue="bold" variant="solid" aria-label="Solid">  <ToggleGroupItem value="bold"><TextB /></ToggleGroupItem>  <ToggleGroupItem value="italic"><TextItalic /></ToggleGroupItem>  <ToggleGroupItem value="underline"><TextUnderline /></ToggleGroupItem></ToggleGroup>

<ToggleGroup type="single" defaultValue="bold" variant="outline" aria-label="Outline">  <ToggleGroupItem value="bold"><TextB /></ToggleGroupItem>  <ToggleGroupItem value="italic"><TextItalic /></ToggleGroupItem>  <ToggleGroupItem value="underline"><TextUnderline /></ToggleGroupItem></ToggleGroup>

Sizes

<ToggleGroup type="single" defaultValue="bold" size="xs" aria-label="xs">  <ToggleGroupItem value="bold"><TextB /></ToggleGroupItem>  <ToggleGroupItem value="italic"><TextItalic /></ToggleGroupItem>  <ToggleGroupItem value="underline"><TextUnderline /></ToggleGroupItem></ToggleGroup>

<ToggleGroup type="single" defaultValue="bold" size="lg" aria-label="lg">  <ToggleGroupItem value="bold"><TextB /></ToggleGroupItem>  <ToggleGroupItem value="italic"><TextItalic /></ToggleGroupItem>  <ToggleGroupItem value="underline"><TextUnderline /></ToggleGroupItem></ToggleGroup>

Vertical

<ToggleGroup type="single" defaultValue="left" orientation="vertical" variant="outline" aria-label="Alignment">  <ToggleGroupItem value="left" aria-label="Align left">    <TextAlignLeft />  </ToggleGroupItem>  <ToggleGroupItem value="center" aria-label="Align center">    <TextAlignCenter />  </ToggleGroupItem>  <ToggleGroupItem value="right" aria-label="Align right">    <TextAlignRight />  </ToggleGroupItem></ToggleGroup>

Disabled

<ToggleGroup type="single" disabled aria-label="Disabled group">  <ToggleGroupItem value="bold"><TextB /></ToggleGroupItem>  <ToggleGroupItem value="italic"><TextItalic /></ToggleGroupItem>  <ToggleGroupItem value="underline"><TextUnderline /></ToggleGroupItem></ToggleGroup>

Props

ToggleGroup and ToggleGroupItem forward props to Radix Toggle Group (ToggleGroupPrimitive.Root / ToggleGroupPrimitive.Item). See the Radix UI Toggle Group documentation for type, value, defaultValue, onValueChange, disabled, and roving-focus behavior.

ToggleGroup

Prop	Type	Default	Description
`type`	`"single" \| "multiple"`	—	Required. Single-select or multi-select behavior.
`variant`	`"solid" \| "subtle" \| "outline"`	`"subtle"`	Visual style — passed to every item via context.
`size`	`"xs" \| "sm" \| "default" \| "lg"`	`"default"`	Control size — passed to every item via context.
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`	Stacking direction. Drives keyboard navigation and visual flush corners.
`value` / `defaultValue`	`string \| string[]`	—	Controlled vs uncontrolled value. Array when `type="multiple"`.
`onValueChange`	`(value: string \| string[]) => void`	—	Fires when the pressed item(s) change.
`disabled`	`boolean`	`false`	Disables the entire group.

ToggleGroupItem

Prop	Type	Default	Description
`value`	`string`	—	Required. Identifier matched against the group's `value`.
`variant`	`"solid" \| "subtle" \| "outline"`	inherited	Per-item override. Falls back to the group's `variant`.
`size`	`"xs" \| "sm" \| "default" \| "lg"`	inherited	Per-item override. Falls back to the group's `size`.
`disabled`	`boolean`	`false`	Disables this item.

Toggle Group

On this page