Toggle Group
The Toggle Group component features a set of two-state buttons that can be toggled on or off. It allows users to select multiple settings or options simultaneously, enhancing customization and control within the interface. This component is ideal for scenarios where users need to manage multiple preferences or configurations in a streamlined manner.
Additional Examples
Default
Outline
Single
Small
Large
Disabled
Configurable Props
<ToggleGroup>
Prop | Type | Default/ Options | Description |
|---|---|---|---|
type* | enum ("single" | "multiple") | Determines whether a single or multiple items can be pressed at a time. | |
value | string | The controlled value of the select. Should be used in conjunction with onValueChange. | |
defaultValue | string | The value of the item to show as pressed when initially rendered and type is "single". Use when you do not need to control the state of the items. | |
onValueChange | function (value: string) => void | Event handler called when the value changes. | |
value | string[] | [] | The controlled value of the pressed items when type is "multiple". Must be used in conjunction with onValueChange. |
defaultValue | string[] | [] | The values of the items to show as pressed when initially rendered and type is "multiple". Use when you do not need to control the state of the items. |
onValueChange | (value: string[]) => void | Event handler called when the pressed state of an item changes and type is "multiple". | |
disabled | boolean | false | When true, prevents the user from interacting with the toggle group and all its items. |
rovingFocus | boolean | true | When false, navigating through the items using arrow keys will be disabled. |
orientation | enum ("horizontal" | "vertical" | undefined) | "horizontal" | The orientation of the component. |
loop | boolean | true | When true and rovingFocus is true, keyboard navigation will loop from last item to first, and vice versa. |
<ToggleGroupItem>
Prop | Type | Default/ Options | Description |
|---|---|---|---|
value* | string | true | A unique value for the item. |
disabled | boolean | true | When true, prevents the user from interacting with the item. |