Forms · Application UI
Toggle Group
Single- or multi-select group of toggle buttons sharing variant/size context.
@byronwade/foundation@byronwade/utils@byronwade/toggle@base-ui/reactclass-variance-authority
Feature showcase
Installation
Features
6 examples
Default, Multiple, Variants, Sizes, Vertical, Disabled.
API
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| value | string[] | - | Controlled array of pressed item values. |
| defaultValue | string[] | - | Uncontrolled initial pressed values. |
| onValueChange | (value: string[]) => void | - | Fires when the pressed items change. |
| multiple | boolean | false | Allow more than one item pressed at once. |
| variant | "default" | "outline" | "default" | Visual style shared by all items. |
| size | "default" | "sm" | "lg" | "default" | Item size shared by all items. |
| orientation | "horizontal" | "vertical" | "horizontal" | Layout axis of the group. |
| disabled | boolean | false | Disable the entire group. |
Dependencies
| Package | Kind | Description |
|---|---|---|
| @byronwade/foundation | registry | Installed through the byronwade/ui registry. |
| @byronwade/utils | registry | Installed through the byronwade/ui registry. |
| @byronwade/toggle | registry | Installed through the byronwade/ui registry. |
| @base-ui/react | npm | Installed from npm. |
| class-variance-authority | npm | Installed from npm. |
Source and related
| File | Path |
|---|---|
| Component | registry/ui/toggle-group.tsx |
| Default example | content/examples/toggle-group/default.tsx |
| Multiple example | content/examples/toggle-group/multiple.tsx |
| Variants example | content/examples/toggle-group/variants.tsx |
| Sizes example | content/examples/toggle-group/sizes.tsx |
| Vertical example | content/examples/toggle-group/vertical.tsx |
| Disabled example | content/examples/toggle-group/disabled.tsx |