Toggle group

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

Examples

Default with multiple selectable

Default with single selectable

Icons

Text and icons

Compact variant

Props

ToggleGroup

*required
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

*required
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	(selected: boolean, event: React.MouseEvent<any> \| React.KeyboardEvent \| MouseEvent) => void	() => {}	A callback for when the toggle group item selection changes.
text	React.ReactNode		Text rendered inside the toggle group item

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