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>.
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 | |
| 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
| Selector | Variable | Value | ||
|---|---|---|---|---|
| .pf-v5-c-toggle-group | --pf-v5-c-toggle-group__button--PaddingTop | 0.375rem | ||
--pf-v5-c-toggle-group__button--PaddingTop --pf-v5-global--spacer--form-element $pf-v5-global--spacer--form-element pf-size-prem(6px) 0.375rem | ||||
| .pf-v5-c-toggle-group | --pf-v5-c-toggle-group__button--PaddingRight | 1rem | ||
--pf-v5-c-toggle-group__button--PaddingRight --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
| .pf-v5-c-toggle-group | --pf-v5-c-toggle-group__button--PaddingBottom | 0.375rem | ||
--pf-v5-c-toggle-group__button--PaddingBottom --pf-v5-global--spacer--form-element $pf-v5-global--spacer--form-element pf-size-prem(6px) 0.375rem | ||||
| .pf-v5-c-toggle-group | --pf-v5-c-toggle-group__button--PaddingLeft | 1rem | ||
--pf-v5-c-toggle-group__button--PaddingLeft --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
| .pf-v5-c-toggle-group | --pf-v5-c-toggle-group__button--FontSize | 0.875rem | ||
--pf-v5-c-toggle-group__button--FontSize --pf-v5-global--FontSize--sm $pf-v5-global--FontSize--sm pf-font-prem(14px) 0.875rem | ||||
| .pf-v5-c-toggle-group | --pf-v5-c-toggle-group__button--LineHeight | calc(1rem * 1.5) | ||
--pf-v5-c-toggle-group__button--LineHeight calc(--pf-v5-global--FontSize--md * --pf-v5-global--LineHeight--md) calc($pf-v5-global--FontSize--md * $pf-v5-global--LineHeight--md) calc(pf-font-prem(16px) * 1.5) calc(1rem * 1.5) | ||||
| .pf-v5-c-toggle-group | --pf-v5-c-toggle-group__button--Color | #151515 | ||
--pf-v5-c-toggle-group__button--Color --pf-v5-global--Color--100 $pf-v5-global--Color--100 $pf-v5-color-black-900 #151515 | ||||
| .pf-v5-c-toggle-group | --pf-v5-c-toggle-group__button--BackgroundColor | #fff | ||
--pf-v5-c-toggle-group__button--BackgroundColor --pf-v5-global--BackgroundColor--100 $pf-v5-global--BackgroundColor--100 $pf-v5-color-white #fff | ||||
| .pf-v5-c-toggle-group | --pf-v5-c-toggle-group__button--ZIndex | auto | ||
| .pf-v5-c-toggle-group | --pf-v5-c-toggle-group__button--hover--BackgroundColor | #f0f0f0 | ||
--pf-v5-c-toggle-group__button--hover--BackgroundColor --pf-v5-global--BackgroundColor--200 $pf-v5-global--BackgroundColor--200 $pf-v5-color-black-200 #f0f0f0 | ||||
| .pf-v5-c-toggle-group | --pf-v5-c-toggle-group__button--hover--ZIndex | 100 | ||
--pf-v5-c-toggle-group__button--hover--ZIndex --pf-v5-global--ZIndex--xs $pf-v5-global--ZIndex--xs 100 | ||||
| .pf-v5-c-toggle-group | --pf-v5-c-toggle-group__button--hover--before--BorderColor | #8a8d90 | ||
--pf-v5-c-toggle-group__button--hover--before--BorderColor --pf-v5-global--BorderColor--200 $pf-v5-global--BorderColor--200 $pf-v5-color-black-500 #8a8d90 | ||||
| .pf-v5-c-toggle-group | --pf-v5-c-toggle-group__button--focus--BackgroundColor | #f0f0f0 | ||
--pf-v5-c-toggle-group__button--focus--BackgroundColor --pf-v5-global--BackgroundColor--200 $pf-v5-global--BackgroundColor--200 $pf-v5-color-black-200 #f0f0f0 | ||||
| .pf-v5-c-toggle-group | --pf-v5-c-toggle-group__button--focus--ZIndex | 100 | ||
--pf-v5-c-toggle-group__button--focus--ZIndex --pf-v5-global--ZIndex--xs $pf-v5-global--ZIndex--xs 100 | ||||
| .pf-v5-c-toggle-group | --pf-v5-c-toggle-group__button--focus--before--BorderColor | #8a8d90 | ||
--pf-v5-c-toggle-group__button--focus--before--BorderColor --pf-v5-global--BorderColor--200 $pf-v5-global--BorderColor--200 $pf-v5-color-black-500 #8a8d90 | ||||
| .pf-v5-c-toggle-group | --pf-v5-c-toggle-group__button--disabled--BackgroundColor | #d2d2d2 | ||
--pf-v5-c-toggle-group__button--disabled--BackgroundColor --pf-v5-global--disabled-color--200 $pf-v5-global--disabled-color--200 $pf-v5-color-black-300 #d2d2d2 | ||||
| .pf-v5-c-toggle-group | --pf-v5-c-toggle-group__button--disabled--Color | #6a6e73 | ||
--pf-v5-c-toggle-group__button--disabled--Color --pf-v5-global--disabled-color--100 $pf-v5-global--disabled-color--100 $pf-v5-color-black-600 #6a6e73 | ||||
| .pf-v5-c-toggle-group | --pf-v5-c-toggle-group__button--before--BorderWidth | 1px | ||
--pf-v5-c-toggle-group__button--before--BorderWidth --pf-v5-global--BorderWidth--sm $pf-v5-global--BorderWidth--sm 1px | ||||
| .pf-v5-c-toggle-group | --pf-v5-c-toggle-group__button--before--BorderColor | #d2d2d2 | ||
--pf-v5-c-toggle-group__button--before--BorderColor --pf-v5-global--BorderColor--100 $pf-v5-global--BorderColor--100 $pf-v5-color-black-300 #d2d2d2 | ||||
| .pf-v5-c-toggle-group | --pf-v5-c-toggle-group__item--item--MarginLeft | calc(-1 * 1px) | ||
--pf-v5-c-toggle-group__item--item--MarginLeft calc(-1 * --pf-v5-global--BorderWidth--sm) calc(-1 * $pf-v5-global--BorderWidth--sm) calc(-1 * 1px) | ||||
| .pf-v5-c-toggle-group | --pf-v5-c-toggle-group__item--first-child__button--BorderTopLeftRadius | 3px | ||
--pf-v5-c-toggle-group__item--first-child__button--BorderTopLeftRadius --pf-v5-global--BorderRadius--sm $pf-v5-global--BorderRadius--sm 3px | ||||
| .pf-v5-c-toggle-group | --pf-v5-c-toggle-group__item--first-child__button--BorderBottomLeftRadius | 3px | ||
--pf-v5-c-toggle-group__item--first-child__button--BorderBottomLeftRadius --pf-v5-global--BorderRadius--sm $pf-v5-global--BorderRadius--sm 3px | ||||
| .pf-v5-c-toggle-group | --pf-v5-c-toggle-group__item--last-child__button--BorderTopRightRadius | 3px | ||
--pf-v5-c-toggle-group__item--last-child__button--BorderTopRightRadius --pf-v5-global--BorderRadius--sm $pf-v5-global--BorderRadius--sm 3px | ||||
| .pf-v5-c-toggle-group | --pf-v5-c-toggle-group__item--last-child__button--BorderBottomRightRadius | 3px | ||
--pf-v5-c-toggle-group__item--last-child__button--BorderBottomRightRadius --pf-v5-global--BorderRadius--sm $pf-v5-global--BorderRadius--sm 3px | ||||
| .pf-v5-c-toggle-group | --pf-v5-c-toggle-group__icon--text--MarginLeft | 0.5rem | ||
--pf-v5-c-toggle-group__icon--text--MarginLeft --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
| .pf-v5-c-toggle-group | --pf-v5-c-toggle-group__button--m-selected--BackgroundColor | #e7f1fa | ||
--pf-v5-c-toggle-group__button--m-selected--BackgroundColor --pf-v5-global--palette--blue-50 $pf-v5-color-blue-50 #e7f1fa | ||||
| .pf-v5-c-toggle-group | --pf-v5-c-toggle-group__button--m-selected--Color | initial | ||
| .pf-v5-c-toggle-group | --pf-v5-c-toggle-group__button--m-selected--before--BorderColor | #06c | ||
--pf-v5-c-toggle-group__button--m-selected--before--BorderColor --pf-v5-global--primary-color--100 $pf-v5-global--primary-color--100 $pf-v5-color-blue-400 #06c | ||||
| .pf-v5-c-toggle-group | --pf-v5-c-toggle-group__button--m-selected--ZIndex | 100 | ||
--pf-v5-c-toggle-group__button--m-selected--ZIndex --pf-v5-global--ZIndex--xs $pf-v5-global--ZIndex--xs 100 | ||||
| .pf-v5-c-toggle-group | --pf-v5-c-toggle-group--m-compact__button--PaddingTop | 0 | ||
| .pf-v5-c-toggle-group | --pf-v5-c-toggle-group--m-compact__button--PaddingRight | 0.5rem | ||
--pf-v5-c-toggle-group--m-compact__button--PaddingRight --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
| .pf-v5-c-toggle-group | --pf-v5-c-toggle-group--m-compact__button--PaddingBottom | 0 | ||
| .pf-v5-c-toggle-group | --pf-v5-c-toggle-group--m-compact__button--PaddingLeft | 0.5rem | ||
--pf-v5-c-toggle-group--m-compact__button--PaddingLeft --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
| .pf-v5-c-toggle-group | --pf-v5-c-toggle-group--m-compact__button--FontSize | 0.75rem | ||
--pf-v5-c-toggle-group--m-compact__button--FontSize --pf-v5-global--FontSize--xs $pf-v5-global--FontSize--xs pf-font-prem(12px) 0.75rem | ||||
| .pf-v5-c-toggle-group.pf-m-compact | --pf-v5-c-toggle-group__button--PaddingTop | 0 | ||
--pf-v5-c-toggle-group__button--PaddingTop --pf-v5-c-toggle-group--m-compact__button--PaddingTop 0 | ||||
| .pf-v5-c-toggle-group.pf-m-compact | --pf-v5-c-toggle-group__button--PaddingRight | 0.5rem | ||
--pf-v5-c-toggle-group__button--PaddingRight --pf-v5-c-toggle-group--m-compact__button--PaddingRight --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
| .pf-v5-c-toggle-group.pf-m-compact | --pf-v5-c-toggle-group__button--PaddingBottom | 0 | ||
--pf-v5-c-toggle-group__button--PaddingBottom --pf-v5-c-toggle-group--m-compact__button--PaddingBottom 0 | ||||
| .pf-v5-c-toggle-group.pf-m-compact | --pf-v5-c-toggle-group__button--PaddingLeft | 0.5rem | ||
--pf-v5-c-toggle-group__button--PaddingLeft --pf-v5-c-toggle-group--m-compact__button--PaddingLeft --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
| .pf-v5-c-toggle-group.pf-m-compact | --pf-v5-c-toggle-group__button--FontSize | 0.75rem | ||
--pf-v5-c-toggle-group__button--FontSize --pf-v5-c-toggle-group--m-compact__button--FontSize --pf-v5-global--FontSize--xs $pf-v5-global--FontSize--xs pf-font-prem(12px) 0.75rem | ||||
| .pf-v5-c-toggle-group__button:hover | --pf-v5-c-toggle-group__button--BackgroundColor | #f0f0f0 | ||
--pf-v5-c-toggle-group__button--BackgroundColor --pf-v5-c-toggle-group__button--hover--BackgroundColor --pf-v5-global--BackgroundColor--200 $pf-v5-global--BackgroundColor--200 $pf-v5-color-black-200 #f0f0f0 | ||||
| .pf-v5-c-toggle-group__button:hover | --pf-v5-c-toggle-group__button--ZIndex | 100 | ||
--pf-v5-c-toggle-group__button--ZIndex --pf-v5-c-toggle-group__button--hover--ZIndex --pf-v5-global--ZIndex--xs $pf-v5-global--ZIndex--xs 100 | ||||
| .pf-v5-c-toggle-group__button:hover | --pf-v5-c-toggle-group__button--before--BorderColor | #8a8d90 | ||
--pf-v5-c-toggle-group__button--before--BorderColor --pf-v5-c-toggle-group__button--hover--before--BorderColor --pf-v5-global--BorderColor--200 $pf-v5-global--BorderColor--200 $pf-v5-color-black-500 #8a8d90 | ||||
| .pf-v5-c-toggle-group__button:focus | --pf-v5-c-toggle-group__button--BackgroundColor | #f0f0f0 | ||
--pf-v5-c-toggle-group__button--BackgroundColor --pf-v5-c-toggle-group__button--focus--BackgroundColor --pf-v5-global--BackgroundColor--200 $pf-v5-global--BackgroundColor--200 $pf-v5-color-black-200 #f0f0f0 | ||||
| .pf-v5-c-toggle-group__button:focus | --pf-v5-c-toggle-group__button--ZIndex | 100 | ||
--pf-v5-c-toggle-group__button--ZIndex --pf-v5-c-toggle-group__button--focus--ZIndex --pf-v5-global--ZIndex--xs $pf-v5-global--ZIndex--xs 100 | ||||
| .pf-v5-c-toggle-group__button:focus | --pf-v5-c-toggle-group__button--before--BorderColor | #8a8d90 | ||
--pf-v5-c-toggle-group__button--before--BorderColor --pf-v5-c-toggle-group__button--focus--before--BorderColor --pf-v5-global--BorderColor--200 $pf-v5-global--BorderColor--200 $pf-v5-color-black-500 #8a8d90 | ||||
| .pf-v5-c-toggle-group__button.pf-m-selected | --pf-v5-c-toggle-group__button--BackgroundColor | #e7f1fa | ||
--pf-v5-c-toggle-group__button--BackgroundColor --pf-v5-c-toggle-group__button--m-selected--BackgroundColor --pf-v5-global--palette--blue-50 $pf-v5-color-blue-50 #e7f1fa | ||||
| .pf-v5-c-toggle-group__button.pf-m-selected | --pf-v5-c-toggle-group__button--Color | initial, inherit | ||
--pf-v5-c-toggle-group__button--Color var(--pf-v5-c-toggle-group__button--m-selected--Color, inherit) initial, inherit | ||||
| .pf-v5-c-toggle-group__button.pf-m-selected | --pf-v5-c-toggle-group__button--ZIndex | 100 | ||
--pf-v5-c-toggle-group__button--ZIndex --pf-v5-c-toggle-group__button--m-selected--ZIndex --pf-v5-global--ZIndex--xs $pf-v5-global--ZIndex--xs 100 | ||||
| .pf-v5-c-toggle-group__button.pf-m-selected | --pf-v5-c-toggle-group__button--before--BorderColor | #06c | ||
--pf-v5-c-toggle-group__button--before--BorderColor --pf-v5-c-toggle-group__button--m-selected--before--BorderColor --pf-v5-global--primary-color--100 $pf-v5-global--primary-color--100 $pf-v5-color-blue-400 #06c | ||||
| .pf-v5-c-toggle-group__button:disabled | --pf-v5-c-toggle-group__button--BackgroundColor | #d2d2d2 | ||
--pf-v5-c-toggle-group__button--BackgroundColor --pf-v5-c-toggle-group__button--disabled--BackgroundColor --pf-v5-global--disabled-color--200 $pf-v5-global--disabled-color--200 $pf-v5-color-black-300 #d2d2d2 | ||||
| .pf-v5-c-toggle-group__button:disabled | --pf-v5-c-toggle-group__button--Color | #6a6e73 | ||
--pf-v5-c-toggle-group__button--Color --pf-v5-c-toggle-group__button--disabled--Color --pf-v5-global--disabled-color--100 $pf-v5-global--disabled-color--100 $pf-v5-color-black-600 #6a6e73 | ||||
View source on GitHub