Skip to content
PatternFly

Switch

A switch toggles the state of a setting (between on and off). Switches and checkboxes can often be used interchangeably, but the switch provides a more explicit, visible representation on a setting.

Examples

Basic

Reversed Layout

Without label

Checked with label

Disabled




Uncontrolled


Props

Switch

*required
NameTypeDefaultDescription
aria-labelstring''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.
classNamestringAdditional classes added to the switch
defaultCheckedbooleanFlag to set the default checked value of the switch when it is uncontrolled by React state. To make the switch controlled instead use the isChecked prop, but do not use both.
hasCheckIconbooleanFlag to show if the switch has a check icon.
idstringid for the label.
isCheckedbooleantrueFlag to show if the switch is checked when it is controlled by React state. To make the switch uncontrolled instead use the defaultChecked prop, but do not use both.
isDisabledbooleanfalseFlag to show if the switch is disabled.
isReversedbooleanfalseFlag to reverse the layout of toggle and label (toggle on right).
labelReact.ReactNodeText value for the visible label when on
labelOffReact.ReactNodeText value for the visible label when off
onChange(event: React.FormEvent<HTMLInputElement>, checked: boolean) => void() => undefined as anyA callback for when the switch selection changes. (event, isChecked) => {}
ouiaIdnumber | stringValue to overwrite the randomly generated data-ouia-component-id.
ouiaSafebooleanSet the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false.

CSS variables

Expand or collapse columnSelectorVariableValue
.pf-v5-c-switch--pf-v5-c-switch--FontSize
1rem
.pf-v5-c-switch--pf-v5-c-switch__label--PaddingLeft
1rem
.pf-v5-c-switch--pf-v5-c-switch--ColumnGap
1rem
.pf-v5-c-switch--pf-v5-c-switch__toggle-icon--FontSize
calc(1rem * .625)
.pf-v5-c-switch--pf-v5-c-switch__toggle-icon--Color
#fff
.pf-v5-c-switch--pf-v5-c-switch__toggle-icon--Left
calc(1rem * .4)
.pf-v5-c-switch--pf-v5-c-switch__toggle-icon--Offset
0.125rem
.pf-v5-c-switch--pf-v5-c-switch__input--disabled__toggle-icon--Color
#f5f5f5
.pf-v5-c-switch--pf-v5-c-switch--LineHeight
1.5
.pf-v5-c-switch--pf-v5-c-switch--Height
auto
.pf-v5-c-switch--pf-v5-c-switch__input--checked__toggle--BackgroundColor
#06c
.pf-v5-c-switch--pf-v5-c-switch__input--checked__toggle--before--TranslateX
calc(100% + 0.125rem)
.pf-v5-c-switch--pf-v5-c-switch__input--checked__label--Color
#151515
.pf-v5-c-switch--pf-v5-c-switch__input--not-checked__label--Color
#6a6e73
.pf-v5-c-switch--pf-v5-c-switch__input--disabled__label--Color
#6a6e73
.pf-v5-c-switch--pf-v5-c-switch__input--disabled__toggle--BackgroundColor
#d2d2d2
.pf-v5-c-switch--pf-v5-c-switch__input--disabled__toggle--before--BackgroundColor
#f5f5f5
.pf-v5-c-switch--pf-v5-c-switch__input--focus__toggle--OutlineWidth
2px
.pf-v5-c-switch--pf-v5-c-switch__input--focus__toggle--OutlineOffset
0.5rem
.pf-v5-c-switch--pf-v5-c-switch__input--focus__toggle--OutlineColor
#06c
.pf-v5-c-switch--pf-v5-c-switch__toggle--Height
calc(1rem * 1.5)
.pf-v5-c-switch--pf-v5-c-switch__toggle--BackgroundColor
#8a8d90
.pf-v5-c-switch--pf-v5-c-switch__toggle--BorderRadius
calc(1rem * 1.5)
.pf-v5-c-switch--pf-v5-c-switch__toggle--before--Width
calc(1rem - 0.125rem)
.pf-v5-c-switch--pf-v5-c-switch__toggle--before--Height
calc(1rem - 0.125rem)
.pf-v5-c-switch--pf-v5-c-switch__toggle--before--Top
calc((calc(1rem * 1.5) - calc(1rem - 0.125rem)) / 2)
.pf-v5-c-switch--pf-v5-c-switch__toggle--before--Left
calc((calc(1rem * 1.5) - calc(1rem - 0.125rem)) / 2)
.pf-v5-c-switch--pf-v5-c-switch__toggle--before--BackgroundColor
#fff
.pf-v5-c-switch--pf-v5-c-switch__toggle--before--BorderRadius
30em
.pf-v5-c-switch--pf-v5-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-v5-c-switch--pf-v5-c-switch__toggle--before--Transition
transform .25s ease 0s
.pf-v5-c-switch--pf-v5-c-switch__toggle--Width
calc(calc(1rem * 1.5) + 0.125rem + calc(1rem - 0.125rem))
.pf-v5-c-switch--pf-v5-c-switch__label--Color
#151515
.pf-v5-c-switch__input:disabled ~ .pf-v5-c-switch__toggle--pf-v5-c-switch__toggle-icon--Color
#f5f5f5

View source on GitHub
Red Hat
Copyright © 2014-2024 Red Hat, Inc.
Privacy statementTerms of useAll policies and guidelines