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 column	Selector	Variable	Value
	.pf-v6-c-toggle-group	--pf-v6-c-toggle-group__button--PaddingBlockStart	0.5rem
--pf-v6-c-toggle-group__button--PaddingBlockStart --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-toggle-group	--pf-v6-c-toggle-group__button--PaddingInlineEnd	1rem
--pf-v6-c-toggle-group__button--PaddingInlineEnd --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-toggle-group	--pf-v6-c-toggle-group__button--PaddingBlockEnd	0.5rem
--pf-v6-c-toggle-group__button--PaddingBlockEnd --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-toggle-group	--pf-v6-c-toggle-group__button--PaddingInlineStart	1rem
--pf-v6-c-toggle-group__button--PaddingInlineStart --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-toggle-group	--pf-v6-c-toggle-group__button--FontSize	0.875rem
--pf-v6-c-toggle-group__button--FontSize --pf-t--global--font--size--body--default --pf-t--global--font--size--sm --pf-t--global--font--size--200 0.875rem
	.pf-v6-c-toggle-group	--pf-v6-c-toggle-group__button--LineHeight	1.5
--pf-v6-c-toggle-group__button--LineHeight --pf-t--global--font--line-height--body --pf-t--global--font--line-height--200 1.5
	.pf-v6-c-toggle-group	--pf-v6-c-toggle-group__button--Color	(In light theme) #151515
--pf-v6-c-toggle-group__button--Color --pf-t--global--text--color--regular --pf-t--global--text--color--100 --pf-t--color--gray--95 #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__button--BackgroundColor --pf-t--global--background--color--action--plain--default 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__button--hover--BackgroundColor --pf-t--global--background--color--primary--hover --pf-t--global--background--color--200 --pf-t--color--gray--10 #f2f2f2
	.pf-v6-c-toggle-group	--pf-v6-c-toggle-group__button--hover--ZIndex	100
--pf-v6-c-toggle-group__button--hover--ZIndex --pf-t--global--z-index--xs --pf-t--global--z-index--100 100
	.pf-v6-c-toggle-group	--pf-v6-c-toggle-group__button--hover--before--BorderColor	(In light theme) #c7c7c7
--pf-v6-c-toggle-group__button--hover--before--BorderColor --pf-t--global--border--color--default --pf-t--global--border--color--100 --pf-t--color--gray--30 #c7c7c7
	.pf-v6-c-toggle-group	--pf-v6-c-toggle-group__button--before--BorderWidth	1px
--pf-v6-c-toggle-group__button--before--BorderWidth --pf-t--global--border--width--control--default --pf-t--global--border--width--100 1px
	.pf-v6-c-toggle-group	--pf-v6-c-toggle-group__button--before--BorderColor	(In light theme) #c7c7c7
--pf-v6-c-toggle-group__button--before--BorderColor --pf-t--global--border--color--default --pf-t--global--border--color--100 --pf-t--color--gray--30 #c7c7c7
	.pf-v6-c-toggle-group	--pf-v6-c-toggle-group__item--item--MarginInlineStart	calc(-1 * 1px)
--pf-v6-c-toggle-group__item--item--MarginInlineStart calc(-1 * --pf-t--global--border--width--control--default) calc(-1 * --pf-t--global--border--width--100) calc(-1 * 1px)
	.pf-v6-c-toggle-group	--pf-v6-c-toggle-group__item--first-child__button--BorderStartStartRadius	4px
--pf-v6-c-toggle-group__item--first-child__button--BorderStartStartRadius --pf-t--global--border--radius--tiny --pf-t--global--border--radius--100 4px
	.pf-v6-c-toggle-group	--pf-v6-c-toggle-group__item--first-child__button--BorderEndStartRadius	4px
--pf-v6-c-toggle-group__item--first-child__button--BorderEndStartRadius --pf-t--global--border--radius--tiny --pf-t--global--border--radius--100 4px
	.pf-v6-c-toggle-group	--pf-v6-c-toggle-group__item--last-child__button--BorderStartEndRadius	4px
--pf-v6-c-toggle-group__item--last-child__button--BorderStartEndRadius --pf-t--global--border--radius--tiny --pf-t--global--border--radius--100 4px
	.pf-v6-c-toggle-group	--pf-v6-c-toggle-group__item--last-child__button--BorderEndEndRadius	4px
--pf-v6-c-toggle-group__item--last-child__button--BorderEndEndRadius --pf-t--global--border--radius--tiny --pf-t--global--border--radius--100 4px
	.pf-v6-c-toggle-group	--pf-v6-c-toggle-group__icon--text--MarginInlineStart	0.5rem
--pf-v6-c-toggle-group__icon--text--MarginInlineStart --pf-t--global--spacer--sm --pf-t--global--spacer--200 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__button--m-selected--BackgroundColor --pf-t--global--color--brand--default --pf-t--global--color--brand--200 --pf-t--color--blue--50 #0066cc
	.pf-v6-c-toggle-group	--pf-v6-c-toggle-group__button--m-selected--Color	(In light theme) #ffffff
--pf-v6-c-toggle-group__button--m-selected--Color --pf-t--global--text--color--on-brand--default --pf-t--global--text--color--inverse --pf-t--global--text--color--300 --pf-t--color--white #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__button--m-selected--before--BorderColor --pf-t--global--border--color--clicked --pf-t--global--color--brand--200 --pf-t--color--blue--50 #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__button--m-selected-selected--before--BorderInlineStartColor --pf-t--global--border--color--default --pf-t--global--border--color--100 --pf-t--color--gray--30 #c7c7c7
	.pf-v6-c-toggle-group	--pf-v6-c-toggle-group__button--m-selected--ZIndex	100
--pf-v6-c-toggle-group__button--m-selected--ZIndex --pf-t--global--z-index--xs --pf-t--global--z-index--100 100
	.pf-v6-c-toggle-group	--pf-v6-c-toggle-group__button--disabled--BackgroundColor	(In light theme) #c7c7c7
--pf-v6-c-toggle-group__button--disabled--BackgroundColor --pf-t--global--background--color--disabled--default --pf-t--global--color--disabled--100 --pf-t--color--gray--30 #c7c7c7
	.pf-v6-c-toggle-group	--pf-v6-c-toggle-group__button--disabled--Color	(In light theme) #4d4d4d
--pf-v6-c-toggle-group__button--disabled--Color --pf-t--global--text--color--on-disabled --pf-t--global--color--disabled--300 --pf-t--color--gray--60 #4d4d4d
	.pf-v6-c-toggle-group	--pf-v6-c-toggle-group__button--disabled--before--BorderColor	(In light theme) #a3a3a3
--pf-v6-c-toggle-group__button--disabled--before--BorderColor --pf-t--global--border--color--disabled --pf-t--global--color--disabled--200 --pf-t--color--gray--40 #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__button--disabled-disabled--before--BorderInlineStartColor --pf-t--global--border--color--default --pf-t--global--border--color--100 --pf-t--color--gray--30 #c7c7c7
	.pf-v6-c-toggle-group	--pf-v6-c-toggle-group__button--disabled--ZIndex	100
--pf-v6-c-toggle-group__button--disabled--ZIndex --pf-t--global--z-index--xs --pf-t--global--z-index--100 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--m-compact__button--PaddingInlineEnd --pf-t--global--spacer--sm --pf-t--global--spacer--200 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--m-compact__button--PaddingInlineStart --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-toggle-group	--pf-v6-c-toggle-group--m-compact__button--FontSize	0.875rem
--pf-v6-c-toggle-group--m-compact__button--FontSize --pf-t--global--font--size--body--default --pf-t--global--font--size--sm --pf-t--global--font--size--200 0.875rem
	.pf-v6-c-toggle-group.pf-m-compact	--pf-v6-c-toggle-group__button--PaddingBlockStart	0
--pf-v6-c-toggle-group__button--PaddingBlockStart --pf-v6-c-toggle-group--m-compact__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__button--PaddingInlineEnd --pf-v6-c-toggle-group--m-compact__button--PaddingInlineEnd --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-toggle-group.pf-m-compact	--pf-v6-c-toggle-group__button--PaddingBlockEnd	0
--pf-v6-c-toggle-group__button--PaddingBlockEnd --pf-v6-c-toggle-group--m-compact__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__button--PaddingInlineStart --pf-v6-c-toggle-group--m-compact__button--PaddingInlineStart --pf-t--global--spacer--sm --pf-t--global--spacer--200 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--FontSize --pf-v6-c-toggle-group--m-compact__button--FontSize --pf-t--global--font--size--body--default --pf-t--global--font--size--sm --pf-t--global--font--size--200 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--BackgroundColor --pf-v6-c-toggle-group__button--hover--BackgroundColor --pf-t--global--background--color--primary--hover --pf-t--global--background--color--200 --pf-t--color--gray--10 #f2f2f2
	.pf-v6-c-toggle-group__button:is(:hover, :focus)	--pf-v6-c-toggle-group__button--ZIndex	100
--pf-v6-c-toggle-group__button--ZIndex --pf-v6-c-toggle-group__button--hover--ZIndex --pf-t--global--z-index--xs --pf-t--global--z-index--100 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--before--BorderColor --pf-v6-c-toggle-group__button--hover--before--BorderColor --pf-t--global--border--color--default --pf-t--global--border--color--100 --pf-t--color--gray--30 #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--BackgroundColor --pf-v6-c-toggle-group__button--m-selected--BackgroundColor --pf-t--global--color--brand--default --pf-t--global--color--brand--200 --pf-t--color--blue--50 #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--Color var(--pf-v6-c-toggle-group__button--m-selected--Color, inherit) --pf-t--global--text--color--on-brand--default, inherit --pf-t--global--text--color--inverse, inherit --pf-t--global--text--color--300, inherit --pf-t--color--white, inherit #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--ZIndex --pf-v6-c-toggle-group__button--m-selected--ZIndex --pf-t--global--z-index--xs --pf-t--global--z-index--100 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--before--BorderColor --pf-v6-c-toggle-group__button--m-selected--before--BorderColor --pf-t--global--border--color--clicked --pf-t--global--color--brand--200 --pf-t--color--blue--50 #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--BackgroundColor --pf-v6-c-toggle-group__button--disabled--BackgroundColor --pf-t--global--background--color--disabled--default --pf-t--global--color--disabled--100 --pf-t--color--gray--30 #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--Color --pf-v6-c-toggle-group__button--disabled--Color --pf-t--global--text--color--on-disabled --pf-t--global--color--disabled--300 --pf-t--color--gray--60 #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--ZIndex --pf-v6-c-toggle-group__button--disabled--ZIndex --pf-t--global--z-index--xs --pf-t--global--z-index--100 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__button--before--BorderColor --pf-v6-c-toggle-group__button--disabled--before--BorderColor --pf-t--global--border--color--disabled --pf-t--global--color--disabled--200 --pf-t--color--gray--40 #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__button--before--BorderInlineStartColor --pf-v6-c-toggle-group__button--m-selected-selected--before--BorderInlineStartColor --pf-t--global--border--color--default --pf-t--global--border--color--100 --pf-t--color--gray--30 #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
--pf-v6-c-toggle-group__button--before--BorderInlineStartColor --pf-v6-c-toggle-group__button--disabled-disabled--before--BorderInlineStartColor --pf-t--global--border--color--default --pf-t--global--border--color--100 --pf-t--color--gray--30 #c7c7c7

Edit this page on GitHub