Patternfly Logo

Examples

Basic

Without label

Disabled




Uncontrolled




Props

Switch properties
NameTypeRequiredDefaultDescription
aria-labelstringNo''Adds accessible text to the Switch, and should describe the isChecked="true" state. When label is defined, aria-label should be set to the text string that is visible when isChecked is true.
classNamestringNoAdditional classes added to the Switch
idstringNoid for the label.
isCheckedbooleanNotrueFlag to show if the Switch is checked.
isDisabledbooleanNofalseFlag to show if the Switch is disabled.
labelReact.ReactNodeNoText value for the label when on
labelOffReact.ReactNodeNoText value for the label when off
onChange(checked: boolean, event: React.FormEvent<HTMLInputElement>) => voidNo() => undefined as anyA callback for when the Switch selection changes. (isChecked, event) => {}

CSS variables

.pf-c-switch--pf-c-switch--FontSize
1rem
.pf-c-switch--pf-c-switch__toggle-icon--FontSize
calc(1rem * .625)
.pf-c-switch--pf-c-switch__toggle-icon--Color
#fff
.pf-c-switch--pf-c-switch__toggle-icon--Left
calc(1rem * .4)
.pf-c-switch--pf-c-switch__toggle-icon--Offset
0.125rem
.pf-c-switch--pf-c-switch--LineHeight
1.5
.pf-c-switch--pf-c-switch--Height
calc(1rem * 1.5)
.pf-c-switch--pf-c-switch__input--checked__toggle--BackgroundColor
#06c
.pf-c-switch--pf-c-switch__input--checked__toggle--before--TranslateX
calc(100% + 0.125rem)
.pf-c-switch--pf-c-switch__input--checked__label--Color
#151515
.pf-c-switch--pf-c-switch__input--not-checked__label--Color
#6a6e73
.pf-c-switch--pf-c-switch__input--disabled__label--Color
#6a6e73
.pf-c-switch--pf-c-switch__input--disabled__toggle--BackgroundColor
#6a6e73
.pf-c-switch--pf-c-switch__input--disabled__toggle--before--BackgroundColor
#d2d2d2
.pf-c-switch--pf-c-switch__input--focus__toggle--OutlineWidth
2px
.pf-c-switch--pf-c-switch__input--focus__toggle--OutlineOffset
0.5rem
.pf-c-switch--pf-c-switch__input--focus__toggle--OutlineColor
#06c
.pf-c-switch--pf-c-switch__toggle--Height
calc(1rem * 1.5)
.pf-c-switch--pf-c-switch__toggle--BackgroundColor
#d2d2d2
.pf-c-switch--pf-c-switch__toggle--BorderRadius
calc(1rem * 1.5)
.pf-c-switch--pf-c-switch__toggle--before--Width
calc(1rem - 0.125rem)
.pf-c-switch--pf-c-switch__toggle--before--Height
calc(1rem - 0.125rem)
.pf-c-switch--pf-c-switch__toggle--before--Top
calc((calc(1rem * 1.5) - calc(1rem - 0.125rem)) / 2)
.pf-c-switch--pf-c-switch__toggle--before--Left
calc((calc(1rem * 1.5) - calc(1rem - 0.125rem)) / 2)
.pf-c-switch--pf-c-switch__toggle--before--BackgroundColor
#fff
.pf-c-switch--pf-c-switch__toggle--before--BorderRadius
30em
.pf-c-switch--pf-c-switch__toggle--before--BoxShadow
0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.12), 0 0 0.25rem 0 rgba(3, 3, 3, 0.06)
.pf-c-switch--pf-c-switch__toggle--before--Transition
transform .25s ease 0s
.pf-c-switch--pf-c-switch__toggle--Width
calc(calc(1rem * 1.5) + 0.125rem + calc(1rem - 0.125rem))
.pf-c-switch--pf-c-switch__label--PaddingLeft
1rem
.pf-c-switch--pf-c-switch__label--Color
#151515

View source on GitHub