Toggle group

A toggle group is a group 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-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-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-c-toggle-group`	`<div>`	Initiates the toggle group. Required
`.pf-c-toggle-group__button`	`<button>`	Initiates the toggle group button. Required
`.pf-c-toggle-group__item`	`<div>`	Initiates the toggle group item wrapper. Required
`.pf-c-toggle-group__text`	`<span>`	Initiates the toggle button text element.
`.pf-c-toggle-group__icon`	`<span>`	Initiates the toggle button icon element.
`.pf-m-compact`	`.pf-c-toggle-group`	Modifies the toggle group for compact styles.
`.pf-m-selected`	`.pf-c-toggle-group__button`	Modifies the toggle button group button for the selected state.

CSS variables


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

View source on GitHub

QUICKLINKS

CONTRIBUTE

STAY IN TOUCH

Privacy statement Terms of use All policies and guidelines