Toggle group

A toggle group is a set of controls that can be used to quickly switch between actions or states.

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

*required
NameTypeDefaultDescription
areAllGroupsDisabledbooleanfalseDisable all toggle group items under this component.
aria-labelstringAccessible label for the toggle group
childrenReact.ReactNodeContent rendered inside the toggle group
classNamestringAdditional classes added to the toggle group
isCompactbooleanfalseModifies the toggle group to include compact styling.

ToggleGroupItem

*required
NameTypeDefaultDescription
aria-labelstringrequired when icon is used with no supporting text
buttonIdstringOptional id for the button within the toggle group item
classNamestringAdditional classes added to the toggle group item
iconReact.ReactNodeIcon rendered inside the toggle group item
iconPosition'start' | 'end''start'Sets position of the icon when text is also passed in
isDisabledbooleanfalseFlag indicating if the toggle group item is disabled
isSelectedbooleanfalseFlag 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.
textReact.ReactNodeText rendered inside the toggle group item

CSS variables

Expand or collapse columnSelectorVariableValue
.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--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) #c7c7c7
.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--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) #c7c7c7
.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.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: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) #c7c7c7
.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) #c7c7c7