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 | |
|---|---|---|---|---|
| .pf-v6-c-toggle-group | --pf-v6-c-toggle-group__button--PaddingBlockStart | 0.5rem | ||
| ||||
| .pf-v6-c-toggle-group | --pf-v6-c-toggle-group__button--PaddingInlineEnd | 1rem | ||
| ||||
| .pf-v6-c-toggle-group | --pf-v6-c-toggle-group__button--PaddingBlockEnd | 0.5rem | ||
| ||||
| .pf-v6-c-toggle-group | --pf-v6-c-toggle-group__button--PaddingInlineStart | 1rem | ||
| ||||
| .pf-v6-c-toggle-group | --pf-v6-c-toggle-group__button--FontSize | 0.875rem | ||
| ||||
| .pf-v6-c-toggle-group | --pf-v6-c-toggle-group__button--LineHeight | 1.5 | ||
| ||||
| .pf-v6-c-toggle-group | --pf-v6-c-toggle-group__button--Color | (In light theme) #151515 | ||
| ||||
| .pf-v6-c-toggle-group | --pf-v6-c-toggle-group__button--BackgroundColor | (In light theme) rgba(255, 255, 255, 0.0000) | ||
| ||||
| .pf-v6-c-toggle-group | --pf-v6-c-toggle-group__button--ZIndex | auto | ||
| .pf-v6-c-toggle-group | --pf-v6-c-toggle-group__button--hover--BackgroundColor | (In light theme) #f2f2f2 | ||
| ||||
| .pf-v6-c-toggle-group | --pf-v6-c-toggle-group__button--hover--ZIndex | 100 | ||
| ||||
| .pf-v6-c-toggle-group | --pf-v6-c-toggle-group__button--hover--before--BorderColor | (In light theme) #c7c7c7 | ||
| ||||
| .pf-v6-c-toggle-group | --pf-v6-c-toggle-group__button--hover--after--BorderWidth | 0px | ||
| ||||
| .pf-v6-c-toggle-group | --pf-v6-c-toggle-group__button--before--BorderWidth | 1px | ||
| ||||
| .pf-v6-c-toggle-group | --pf-v6-c-toggle-group__button--before--BorderColor | (In light theme) #c7c7c7 | ||
| ||||
| .pf-v6-c-toggle-group | --pf-v6-c-toggle-group__item--item--MarginInlineStart | calc(-1 * 1px) | ||
| ||||
| .pf-v6-c-toggle-group | --pf-v6-c-toggle-group__item--first-child__button--BorderStartStartRadius | 4px | ||
| ||||
| .pf-v6-c-toggle-group | --pf-v6-c-toggle-group__item--first-child__button--BorderEndStartRadius | 4px | ||
| ||||
| .pf-v6-c-toggle-group | --pf-v6-c-toggle-group__item--last-child__button--BorderStartEndRadius | 4px | ||
| ||||
| .pf-v6-c-toggle-group | --pf-v6-c-toggle-group__item--last-child__button--BorderEndEndRadius | 4px | ||
| ||||
| .pf-v6-c-toggle-group | --pf-v6-c-toggle-group__icon--text--MarginInlineStart | 0.5rem | ||
| ||||
| .pf-v6-c-toggle-group | --pf-v6-c-toggle-group__button--m-selected--BackgroundColor | (In light theme) #0066cc | ||
| ||||
| .pf-v6-c-toggle-group | --pf-v6-c-toggle-group__button--m-selected--Color | (In light theme) #ffffff | ||
| ||||
| .pf-v6-c-toggle-group | --pf-v6-c-toggle-group__button--m-selected--before--BorderColor | (In light theme) #0066cc | ||
| ||||
| .pf-v6-c-toggle-group | --pf-v6-c-toggle-group__button--m-selected-selected--before--BorderInlineStartColor | (In light theme) #ffffff | ||
| ||||
| .pf-v6-c-toggle-group | --pf-v6-c-toggle-group__button--m-selected--ZIndex | 100 | ||
| ||||
| .pf-v6-c-toggle-group | --pf-v6-c-toggle-group__button--m-selected--after--BorderWidth | 0px | ||
| ||||
| .pf-v6-c-toggle-group | --pf-v6-c-toggle-group__button--disabled--BackgroundColor | (In light theme) #c7c7c7 | ||
| ||||
| .pf-v6-c-toggle-group | --pf-v6-c-toggle-group__button--disabled--Color | (In light theme) #4d4d4d | ||
| ||||
| .pf-v6-c-toggle-group | --pf-v6-c-toggle-group__button--disabled--before--BorderColor | (In light theme) #a3a3a3 | ||
| ||||
| .pf-v6-c-toggle-group | --pf-v6-c-toggle-group__button--disabled-disabled--before--BorderInlineStartColor | (In light theme) #a3a3a3 | ||
| ||||
| .pf-v6-c-toggle-group | --pf-v6-c-toggle-group__button--disabled--ZIndex | 100 | ||
| ||||
| .pf-v6-c-toggle-group | --pf-v6-c-toggle-group--m-compact__button--PaddingBlockStart | 0 | ||
| .pf-v6-c-toggle-group | --pf-v6-c-toggle-group--m-compact__button--PaddingInlineEnd | 0.5rem | ||
| ||||
| .pf-v6-c-toggle-group | --pf-v6-c-toggle-group--m-compact__button--PaddingBlockEnd | 0 | ||
| .pf-v6-c-toggle-group | --pf-v6-c-toggle-group--m-compact__button--PaddingInlineStart | 0.5rem | ||
| ||||
| .pf-v6-c-toggle-group | --pf-v6-c-toggle-group--m-compact__button--FontSize | 0.875rem | ||
| ||||
| .pf-v6-c-toggle-group.pf-m-compact | --pf-v6-c-toggle-group__button--PaddingBlockStart | 0 | ||
| ||||
| .pf-v6-c-toggle-group.pf-m-compact | --pf-v6-c-toggle-group__button--PaddingInlineEnd | 0.5rem | ||
| ||||
| .pf-v6-c-toggle-group.pf-m-compact | --pf-v6-c-toggle-group__button--PaddingBlockEnd | 0 | ||
| ||||
| .pf-v6-c-toggle-group.pf-m-compact | --pf-v6-c-toggle-group__button--PaddingInlineStart | 0.5rem | ||
| ||||
| .pf-v6-c-toggle-group.pf-m-compact | --pf-v6-c-toggle-group__button--FontSize | 0.875rem | ||
| ||||
| .pf-v6-c-toggle-group__button:is(:hover, :focus) | --pf-v6-c-toggle-group__button--BackgroundColor | (In light theme) #f2f2f2 | ||
| ||||
| .pf-v6-c-toggle-group__button:is(:hover, :focus) | --pf-v6-c-toggle-group__button--ZIndex | 100 | ||
| ||||
| .pf-v6-c-toggle-group__button:is(:hover, :focus) | --pf-v6-c-toggle-group__button--before--BorderColor | (In light theme) #c7c7c7 | ||
| ||||
| .pf-v6-c-toggle-group__button:is(:hover, :focus) | --pf-v6-c-toggle-group__button--after--BorderWidth | 0px | ||
| ||||
| .pf-v6-c-toggle-group__button.pf-m-selected | --pf-v6-c-toggle-group__button--BackgroundColor | (In light theme) #0066cc | ||
| ||||
| .pf-v6-c-toggle-group__button.pf-m-selected | --pf-v6-c-toggle-group__button--Color | (In light theme) #ffffff, inherit | ||
| ||||
| .pf-v6-c-toggle-group__button.pf-m-selected | --pf-v6-c-toggle-group__button--ZIndex | 100 | ||
| ||||
| .pf-v6-c-toggle-group__button.pf-m-selected | --pf-v6-c-toggle-group__button--before--BorderColor | (In light theme) #0066cc | ||
| ||||
| .pf-v6-c-toggle-group__button.pf-m-selected | --pf-v6-c-toggle-group__button--after--BorderWidth | 0px | ||
| ||||
| .pf-v6-c-toggle-group__button:is(:disabled, .pf-m-disabled) | --pf-v6-c-toggle-group__button--BackgroundColor | (In light theme) #c7c7c7 | ||
| ||||
| .pf-v6-c-toggle-group__button:is(:disabled, .pf-m-disabled) | --pf-v6-c-toggle-group__button--Color | (In light theme) #4d4d4d | ||
| ||||
| .pf-v6-c-toggle-group__button:is(:disabled, .pf-m-disabled) | --pf-v6-c-toggle-group__button--ZIndex | 100 | ||
| ||||
| .pf-v6-c-toggle-group__button:is(:disabled, .pf-m-disabled) | --pf-v6-c-toggle-group__button--before--BorderColor | (In light theme) #a3a3a3 | ||
| ||||
| .pf-v6-c-toggle-group__item:has(.pf-m-selected) + .pf-v6-c-toggle-group__item:has(.pf-m-selected) | --pf-v6-c-toggle-group__button--before--BorderInlineStartColor | (In light theme) #ffffff | ||
| ||||
| .pf-v6-c-toggle-group__item:has(:disabled, .pf-m-disabled) + .pf-v6-c-toggle-group__item:has(:disabled, .pf-m-disabled) | --pf-v6-c-toggle-group__button--before--BorderInlineStartColor | (In light theme) #a3a3a3 | ||
| ||||
