Toggle Group
A set of two-state buttons that can be toggled on or off.
Installation
npm i @huin-core/react-toggle-groupAPI Reference
ToggleGroup
| Prop | Type | Description |
|---|---|---|
| asChild | boolean | When set to true, renders the component as its child element, inheriting the child's styles and behavior. |
| type | "single" | "multiple" | Specifies the category or functionality of the component, influencing how it behaves or interacts with other elements. |
| variant | "default" | "outline" | Defines a different style or appearance of the component, allowing for customization of its look and feel based on specific use cases. |
| size | "default" | "sm" | "lg" | Determines the size of the component, adjusting its dimensions to fit different design or layout requirements. |
| defaultValue | — | Specifies the initial value of the component when it is first rendered, before any user interaction or dynamic updates. |
| value | string | Represents the current value or state of the component, which can be used to bind or track its data over time. |
| onValueChange | function | Event handler called when the value changes. |
| disabled | boolean | When set to true, disables the component, preventing user interaction or triggering of associated actions. |
ToggleGroupItem
| Prop | Type | Description |
|---|---|---|
| disabled | boolean | When set to true, disables the component, preventing user interaction or triggering of associated actions. |
| checked | boolean | Represents the current state of the component, indicating whether it is enabled or selected. |
Keyboard Interactions
| Key | Description |
|---|---|
Tab | Moves focus into the group. |
ArrowRight | Moves focus to the next item. |
ArrowLeft | Moves focus to the previous item. |
Space Enter | Toggles the focused item. |