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.
Full-width toggle group
To make toggle group items fill the available horizontal space, use isFill on a <ToggleGroup>. The following example shows full-width toggle groups for a single-select, multi-select, and single-select with disabled item.
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. |
| isFill | boolean | false | Modifies the toggle group items to fill the available space. |
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 |
