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.

Examples

Default with multiple selectable

Default with single selectable

Icons

Text and icons

Light variant

Props

ToggleGroup

NameTypeRequiredDefaultDescription
aria-labelstringNoAccessible label for the toggle group
childrenReact.ReactNodeNoContent rendered inside the toggle group
classNamestringNoAdditional classes added to the toggle group
variantToggleGroupVariant | 'light' | 'default'NoToggleGroupVariant.defaultAdds toggle group variant styles

ToggleGroupItem

NameTypeRequiredDefaultDescription
aria-labelstringNo''required when icon is used with no supporting text
buttonIdstringNo''Optional id for the button within the toggle group item
classNamestringNoAdditional classes added to the toggle group item
iconReact.ReactNodeNoIcon rendered inside the toggle group item
isDisabledbooleanNofalseFlag indicating if the toggle group item is disabled
isSelectedbooleanNofalseFlag indicating if the toggle group item is selected
onChange(selected: boolean, event: React.MouseEvent<any> | React.KeyboardEvent | MouseEvent) => voidNo() => {}A callback for when the toggle group item selection changes.
textReact.ReactNodeNoText rendered inside the toggle group item

CSS variables

.pf-c-toggle-group--pf-c-toggle-group__button--PaddingTop
0.375rem
.pf-c-toggle-group--pf-c-toggle-group__button--PaddingRight
1rem
.pf-c-toggle-group--pf-c-toggle-group__button--PaddingBottom
0.375rem
.pf-c-toggle-group--pf-c-toggle-group__button--PaddingLeft
1rem
.pf-c-toggle-group--pf-c-toggle-group__button--FontSize
0.875rem
.pf-c-toggle-group--pf-c-toggle-group__button--LineHeight
calc(1rem * 1.5)
.pf-c-toggle-group--pf-c-toggle-group__button--Color
#151515
.pf-c-toggle-group--pf-c-toggle-group__button--BackgroundColor
#f0f0f0
.pf-c-toggle-group--pf-c-toggle-group__button--hover--BackgroundColor
#d2d2d2
.pf-c-toggle-group--pf-c-toggle-group__button--focus--BackgroundColor
#d2d2d2
.pf-c-toggle-group--pf-c-toggle-group__button--disabled--BackgroundColor
#d2d2d2
.pf-c-toggle-group--pf-c-toggle-group__button--disabled--Color
#6a6e73
.pf-c-toggle-group--pf-c-toggle-group__item--first-child__button--BorderTopLeftRadius
3px
.pf-c-toggle-group--pf-c-toggle-group__item--first-child__button--BorderBottomLeftRadius
3px
.pf-c-toggle-group--pf-c-toggle-group__item--last-child__button--BorderTopRightRadius
3px
.pf-c-toggle-group--pf-c-toggle-group__item--last-child__button--BorderBottomRightRadius
3px
.pf-c-toggle-group--pf-c-toggle-group__icon--text--MarginLeft
0.5rem
.pf-c-toggle-group--pf-c-toggle-group__button--m-light--BackgroundColor
#fff
.pf-c-toggle-group--pf-c-toggle-group__button--m-selected--BackgroundColor
#06c
.pf-c-toggle-group--pf-c-toggle-group__button--m-selected--Color
#fff
.pf-c-toggle-group__button.pf-m-light--pf-c-toggle-group__button--BackgroundColor
#fff
.pf-c-toggle-group__button:hover--pf-c-toggle-group__button--BackgroundColor
#d2d2d2
.pf-c-toggle-group__button:focus--pf-c-toggle-group__button--BackgroundColor
#d2d2d2
.pf-c-toggle-group__button.pf-m-selected--pf-c-toggle-group__button--BackgroundColor
#06c
.pf-c-toggle-group__button.pf-m-selected--pf-c-toggle-group__button--Color
#fff
.pf-c-toggle-group__button:disabled--pf-c-toggle-group__button--BackgroundColor
#d2d2d2
.pf-c-toggle-group__button:disabled--pf-c-toggle-group__button--Color
#6a6e73

View source on GitHub