Skip to Content
Patternfly Logo

Toggle group

Info alert:Beta feature

This Beta component is currently under review, so please join in and give us your feedback on the PatternFly forum
ExamplesPropsCSS Variables

Examples

Default with multiple selectable

Default with single selectable

Icons

Light variant

Props

ToggleGroup properties
NameTypeRequiredDefaultDescription
childrenReact.ReactNodeNoContent rendered inside the toggle group
classNamestringNoAdditional classes added to the toggle group
variantToggleGroupVariant | 'light' | 'default'NoToggleGroupVariant.defaultAdds toggle group variant styles
aria-labelstringNoAccessible label for the toggle group
ToggleGroupItem properties
NameTypeRequiredDefaultDescription
childrenReact.ReactNodeNoContent rendered inside the toggle group item
classNamestringNoAdditional classes added to the toggle group item
variantToggleGroupItemVariant | 'icon' | 'text'No'text'Adds toggle group item variant styles
isDisabledbooleanNofalseFlag indicating if the toggle group item is disabled
isSelectedbooleanNofalseFlag indicating if the toggle group item is selected
aria-labelstringNo''required when icon is used with no supporting text
buttonIdstringNo''Optional id for the button within the toggle group item
onChange(selected: boolean, event: React.MouseEvent<any> | React.KeyboardEvent | MouseEvent) => voidNo() => {}A callback for when the toggle group item selection changes.

CSS Variables

.pf-c-toggle-group--pf-c-toggle-group__button--PaddingTopc_toggle_group__button_PaddingTop
0.5rem
.pf-c-toggle-group--pf-c-toggle-group__button--PaddingRightc_toggle_group__button_PaddingRight
1rem
.pf-c-toggle-group--pf-c-toggle-group__button--PaddingBottomc_toggle_group__button_PaddingBottom
0.5rem
.pf-c-toggle-group--pf-c-toggle-group__button--PaddingLeftc_toggle_group__button_PaddingLeft
1rem
.pf-c-toggle-group--pf-c-toggle-group__button--FontSizec_toggle_group__button_FontSize
0.875rem
.pf-c-toggle-group--pf-c-toggle-group__button--Colorc_toggle_group__button_Color
#151515
.pf-c-toggle-group--pf-c-toggle-group__button--BackgroundColorc_toggle_group__button_BackgroundColor
#f0f0f0
.pf-c-toggle-group--pf-c-toggle-group__button--hover--BackgroundColorc_toggle_group__button_hover_BackgroundColor
#d2d2d2
.pf-c-toggle-group--pf-c-toggle-group__button--focus--BackgroundColorc_toggle_group__button_focus_BackgroundColor
#d2d2d2
.pf-c-toggle-group--pf-c-toggle-group__button--disabled--BackgroundColorc_toggle_group__button_disabled_BackgroundColor
#d2d2d2
.pf-c-toggle-group--pf-c-toggle-group__button--disabled--Colorc_toggle_group__button_disabled_Color
#6a6e73
.pf-c-toggle-group--pf-c-toggle-group__item--first-child__button--BorderTopLeftRadiusc_toggle_group__item_first_child__button_BorderTopLeftRadius
3px
.pf-c-toggle-group--pf-c-toggle-group__item--first-child__button--BorderBottomLeftRadiusc_toggle_group__item_first_child__button_BorderBottomLeftRadius
3px
.pf-c-toggle-group--pf-c-toggle-group__item--last-child__button--BorderTopRightRadiusc_toggle_group__item_last_child__button_BorderTopRightRadius
3px
.pf-c-toggle-group--pf-c-toggle-group__item--last-child__button--BorderBottomRightRadiusc_toggle_group__item_last_child__button_BorderBottomRightRadius
3px
.pf-c-toggle-group--pf-c-toggle-group__icon--text--MarginLeftc_toggle_group__icon_text_MarginLeft
0.5rem
.pf-c-toggle-group--pf-c-toggle-group__button--m-light--BackgroundColorc_toggle_group__button_m_light_BackgroundColor
#fff
.pf-c-toggle-group--pf-c-toggle-group__button--m-selected--BackgroundColorc_toggle_group__button_m_selected_BackgroundColor
#06c
.pf-c-toggle-group--pf-c-toggle-group__button--m-selected--Colorc_toggle_group__button_m_selected_Color
#fff
.pf-c-toggle-group__button.pf-m-light--pf-c-toggle-group__button--BackgroundColorc_toggle_group__button_BackgroundColor
#fff
.pf-c-toggle-group__button:hover--pf-c-toggle-group__button--BackgroundColorc_toggle_group__button_BackgroundColor
#d2d2d2
.pf-c-toggle-group__button:focus--pf-c-toggle-group__button--BackgroundColorc_toggle_group__button_BackgroundColor
#d2d2d2
.pf-c-toggle-group__button.pf-m-selected--pf-c-toggle-group__button--BackgroundColorc_toggle_group__button_BackgroundColor
#06c
.pf-c-toggle-group__button.pf-m-selected--pf-c-toggle-group__button--Colorc_toggle_group__button_Color
#fff
.pf-c-toggle-group__button:disabled--pf-c-toggle-group__button--BackgroundColorc_toggle_group__button_BackgroundColor
#d2d2d2
.pf-c-toggle-group__button:disabled--pf-c-toggle-group__button--Colorc_toggle_group__button_Color
#6a6e73