Installation#
npmpnpmyarnbun
Examples#
Default#
Default
Single Selection#
Enforce single selection with toggleMultiple={false}.
Single Selection
Multiple Selection#
Multiple
With Icons#
With Icons
Sizes#
Sizes
Colors#
Colors
View Switcher Example#
View Switcher
Disabled Items#
Disabled
Anatomy#
Usage#
Import
import { ToggleGroup } from "@sugarcoat/ui-nxt";Usage
<ToggleGroup
value={selected}
onValueChange={setSelected}
toggleMultiple={false}
>
<ToggleGroup.Item value="left">Left</ToggleGroup.Item>
<ToggleGroup.Item value="center">Center</ToggleGroup.Item>
<ToggleGroup.Item value="right">Right</ToggleGroup.Item>
</ToggleGroup>Props#
ToggleGroup (Root)#
| Prop | Type | Default | Description |
|---|---|---|---|
| value | string[] | - | Controlled selected values |
| defaultValue | string[] | - | Default selected values (uncontrolled) |
| onValueChange | (value: string[]) => void | - | Callback when selection changes |
| toggleMultiple | boolean | true | Whether multiple items can be selected |
| itemSize | "sm" | "md" | "lg" | "md" | Size variant for all toggle items |
| itemColor | "default" | "primary" | "accent" | "default" | Color variant for all toggle items |
| itemVariant | "outline" | "ghost" | "solid" | "outline" | Style variant for all toggle items |
| disabled | boolean | false | Disable all items in the group |
| css | SystemStyleObject | - | Additional CSS styles using Panda CSS syntax |
ToggleGroup.Item#
| Prop | Type | Default | Description |
|---|---|---|---|
| value | string | - | Unique value for this item |
| disabled | boolean | - | Whether this item is disabled |
| size | "sm" | "md" | "lg" | - | Override group size for this item |
| color | "default" | "primary" | "accent" | - | Override group color for this item |
| variant | "outline" | "ghost" | "solid" | - | Override group variant for this item |
Accessibility#
- Built on Base UI ToggleGroup for robust accessibility
- Uses
role="group"with proper ARIA attributes - Arrow keys navigate between items
- Space/Enter toggles the focused item
- Disabled items are properly communicated
- Use
aria-labelfor icon-only items