Toggle group

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

Examples

Default



With icon



Icon-and-text


Compact



Documentation

Accessibility

Attribute
Applied to
Outcome
aria-label="[button label text]"
.pf-v6-c-toggle-group__button
Provides an accessible name for the button when an icon is used instead of text. Required when icon is used with no supporting text
disabled
.pf-v6-c-toggle-group__button
When a button element is used, indicates that it is unavailable and removes it from keyboard focus. Required when button is disabled

Usage

Class
Applied to
Outcome
.pf-v6-c-toggle-group
<div>
Initiates the toggle group. Required
.pf-v6-c-toggle-group__button
<button>
Initiates the toggle group button. Required
.pf-v6-c-toggle-group__item
<div>
Initiates the toggle group item wrapper. Required
.pf-v6-c-toggle-group__text
<span>
Initiates the toggle button text element.
.pf-v6-c-toggle-group__icon
<span>
Initiates the toggle button icon element.
.pf-m-compact
.pf-v6-c-toggle-group
Modifies the toggle group for compact styles.
.pf-m-selected
.pf-v6-c-toggle-group__button
Modifies the toggle button group button for the selected state.

CSS variables

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