Toggle Group

Related pressed buttons, with independent or exclusive selection.

View source Explore Storybook

Interactive preview

Live specimenTry the component

Selected: comfortable

Selected: bold

Selected: comfortable

Installation

Add editable source to an initialized React project. Set up antiflex/ui first if you are new here.

Terminal

npx antiflex-ui@0.1.0-alpha.2 add toggle-group

This site previews the latest workspace styles and motion. The published alpha keeps its released styles until the next npm release.

Usage

React

<ToggleGroup type="multiple" defaultValue={["bold"]} aria-label="Text formatting">
  <ToggleGroupItem value="bold">Bold</ToggleGroupItem>
  <ToggleGroupItem value="italic">Italic</ToggleGroupItem>
</ToggleGroup>

API reference

All components forward native attributes, className, and refs to their underlying elements.

Prop	Type	Default
`type`	`single \| multiple`	`single`
`value / defaultValue`	`string[]`	`[]`
`onValueChange`	`(value: string[]) => void`	`—`
`orientation / loop`	`horizontal \| vertical / boolean`	`horizontal / true`
`variant / size`	`default \| outline / sm \| md \| lg`	`outline / md`
`disabled / item.disabled`	`boolean`	`false`

Accessibility

Name the group and each icon-only button. Items use aria-pressed in a named group, not radio semantics. A single mode can have zero or one pressed item; multiple mode permits independent choices. Arrows follow orientation and LTR/RTL, skip disabled items, and move focus without changing selection. Home/End moves to endpoints. Enter/Space changes the focused value. One item is a Tab stop, preferring the first enabled selected value when the group is re-entered. Values are strings in an array in both modes. Keep item values unique and stable. Rendered items inside custom wrappers participate in the same keyboard collection. Group choices are not form inputs.