Components

Toggle Group

A set of two-state buttons that can be toggled on or off, grouped into a single segmented control for mutually exclusive or multi-select choices.

Basic usage

With type="single" only one item can be pressed at a time — ideal for choices like text alignment.

Multiple selection

Switch to type="multiple" to let several items stay pressed at once, like a text-formatting toolbar.

Variant

The outline variant adds a shared border, reading as a distinct segmented control.

Sizes

Three sizes — sm, the default, and lg — set on the group and inherited by every item.

Props

ToggleGroup — the root container.

PropTypeDefaultDescription
typerequired'single' | 'multiple'—Whether one item or several items can be pressed at once.
variant'default' | 'outline''default'Visual style applied to every item in the group.
size'default' | 'sm' | 'lg''default'Controls the height and padding of each item.
defaultValuestring | string[]—The pressed value(s) for an uncontrolled group. Use a string for single, an array for multiple.
valuestring | string[]—The pressed value(s) for a controlled group. Pair with onValueChange.
onValueChange(value) => void—Called when the pressed value(s) change.
disabledbooleanfalseDisables the entire group.
classNamestring—Additional Tailwind classes to merge onto the group root.

ToggleGroupItem — one toggleable item.

PropTypeDefaultDescription
valuerequiredstring—Unique value that identifies the item within the group.
disabledbooleanfalseDisables this single item.
classNamestring—Additional Tailwind classes to merge onto the item.

Accessibility

  • Built on Radix Toggle Group — the root exposes role="group" and arrow keys move focus between items as a single tab stop (roving tabindex).
  • In single mode items report their pressed state with aria-pressed, so assistive tech announces the active choice.
  • Icon-only items have no visible text — always pass an aria-label describing the action.
  • Each item renders a focus-visible ring on keyboard navigation and respects the disabled attribute, removing it from the tab order.