Toggle Group
Basic Usage
Loading...
Installation
pnpm add @corew500/uiUsage
import { ToggleGroup } from "@corew500/ui/toggle-group"
<ToggleGroup>Content</ToggleGroup>API Reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| value | readonly any[] | — | The open state of the toggle group represented by an array of the values of all pressed toggle buttons. This is the controlled counterpart of `defaultValue`. |
| defaultValue | readonly any[] | — | The open state of the toggle group represented by an array of the values of all pressed toggle buttons. This is the uncontrolled counterpart of `value`. |
| onValueChange | (groupValue: any[], eventDetails: { reason: "none"; event: Event; cancel: () => void; allowPropagation: () => void; isCanceled: boolean; isPropagationAllowed: boolean; trigger: Element; }) => void | — | Callback fired when the pressed states of the toggle group changes. |
| disabled | enum | false | Whether the toggle group should ignore user interaction. |
| orientation | enum | horizontal | — |
| loopFocus | enum | true | Whether to loop keyboard focus back to the first item when the end of the list is reached while using the arrow keys. |
| multiple | enum | false | When `false` only one item in the group can be pressed. If any item in the group becomes pressed, the others will become unpressed. When `true` multiple items can be pressed. |
| style | enum | — | Style applied to the element, or a function that returns a style object based on the component’s state. |
| className | enum | — | CSS class applied to the element, or a function that returns a class based on the component’s state. |
| render | enum | — | Allows you to replace the component’s HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |
| variant | enum | — | — |
| size | enum | — | — |
| spacing | number | 0 | — |
Accessibility
Keyboard Navigation
- Keyboard navigation: Tab moves focus into/out of group, Arrow keys navigate between items
- Space or Enter activates the focused toggle item
Screen Readers
- - Uses role="group" for semantic grouping (handled by Base UI)
- Each item has `aria-pressed` state indicating active/inactive
- For icon-only items, always provide descriptive `aria-label` on each ToggleGroupItem
Additional
- In single-select mode, behaves like radio group (one active at a time)
- In multi-select mode, behaves like checkbox group (multiple can be active)
Localization
Translatable Content
- - Pass translated text to ToggleGroupItem children for text toggles
- Provide translated `aria-label` for icon-only toggles
- Example: `aria-label={t('toolbar.alignLeft')}` for alignment controls