Examples
Single select toggle group
A single select toggle group allows users to toggle between multiple items.
To indicate whether a <ToggleGroupItem> is selected or not, use the isSelected property.
Multi select toggle group
A multi select toggle group allows users to select multiple items at once.
When a toggle item is disabled it cannot be selected. Click the "Disable all" button in the following example to see this in action.
With icons
You can use a recognizable icon as a toggle item label.
To do this, pass an imported icon to the icon property of a <ToggleGroupItem>.
With text and icons
Adding text to a toggle item with an icon helps clarify the button's function.
To do this, pass a descriptive label to the text property of a <ToggleGroupItem>.
When passing both text and icon properties to a <ToggleGroupItem>, you can also pass in iconPosition to determine whether the icon is rendered at the start or end of the item.
Compact toggle group
When space in a UI is limited, you can use a compact toggle group.
To apply compact styling to a <ToggleGroup>, use isCompact.
Props
ToggleGroup
| Name | Type | Default | Description |
|---|---|---|---|
| areAllGroupsDisabled | boolean | false | Disable all toggle group items under this component. |
| aria-label | string | Accessible label for the toggle group | |
| children | React.ReactNode | Content rendered inside the toggle group | |
| className | string | Additional classes added to the toggle group | |
| isCompact | boolean | false | Modifies the toggle group to include compact styling. |
ToggleGroupItem
| Name | Type | Default | Description |
|---|---|---|---|
| aria-label | string | required when icon is used with no supporting text | |
| buttonId | string | Optional id for the button within the toggle group item | |
| className | string | Additional classes added to the toggle group item | |
| icon | React.ReactNode | Icon rendered inside the toggle group item | |
| iconPosition | 'start' | 'end' | 'start' | Sets position of the icon when text is also passed in |
| isDisabled | boolean | false | Flag indicating if the toggle group item is disabled |
| isSelected | boolean | false | Flag indicating if the toggle group item is selected |
| onChange | (event: React.MouseEvent<any> | React.KeyboardEvent | MouseEvent, selected: boolean) => void | () => {} | A callback for when the toggle group item selection changes. |
| text | React.ReactNode | Text rendered inside the toggle group item |
CSS variables
| Expand or collapse column | Selector | Variable | Value |
|---|
