React

Switch

Use a switch to toggle 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. Related design guidelines: Data input

ExamplesPropsCSS Variables

Examples

Basic

Without label

Disabled




Uncontrolled




Props

Switch properties
NameTypeRequiredDefaultDescription
idstring''id for the label.
classNamestring''Additional classes added to the Switch
labelstring''Text value for the label when on
labelOffstring''Text value for the label when off
isCheckedbooleantrueFlag to show if the Switch is checked.
isDisabledbooleanfalseFlag to show if the Switch is disabled.
onChange(checked: boolean, event: React.FormEvent<HTMLInputElement>) => void() => undefined as anyA callback for when the Switch selection changes. (isChecked, event) => {}
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.

CSS Variables

--pf-c-switch__input--checked__label--Colorc_switch__input_checked__label_Color
#151515
--pf-c-switch__input--checked__toggle--BackgroundColorc_switch__input_checked__toggle_BackgroundColor
#06c
--pf-c-switch__input--checked__toggle--before--Transformc_switch__input_checked__toggle_before_Transform
translateX(calc(100% + 0.125rem))
--pf-c-switch__input--disabled__label--Colorc_switch__input_disabled__label_Color
#737679
--pf-c-switch__input--disabled__toggle--BackgroundColorc_switch__input_disabled__toggle_BackgroundColor
#737679
--pf-c-switch__input--disabled__toggle--before--BackgroundColorc_switch__input_disabled__toggle_before_BackgroundColor
#d2d2d2
--pf-c-switch__input--focus__toggle--OutlineColorc_switch__input_focus__toggle_OutlineColor
#06c
--pf-c-switch__input--focus__toggle--OutlineOffsetc_switch__input_focus__toggle_OutlineOffset
0.5rem
--pf-c-switch__input--focus__toggle--OutlineWidthc_switch__input_focus__toggle_OutlineWidth
2px
--pf-c-switch__input--not-checked__label--Colorc_switch__input_not_checked__label_Color
#737679
--pf-c-switch__label--Colorc_switch__label_Color
#151515
--pf-c-switch__label--FontSizec_switch__label_FontSize
1rem
--pf-c-switch__label--FontWeightc_switch__label_FontWeight
400
--pf-c-switch__label--LineHeightc_switch__label_LineHeight
1.5
--pf-c-switch__label--PaddingLeftc_switch__label_PaddingLeft
1rem
--pf-c-switch__toggle--BackgroundColorc_switch__toggle_BackgroundColor
#d2d2d2
--pf-c-switch__toggle--before--BackgroundColorc_switch__toggle_before_BackgroundColor
#fff
--pf-c-switch__toggle--before--BorderRadiusc_switch__toggle_before_BorderRadius
30em
--pf-c-switch__toggle--before--BoxShadowc_switch__toggle_before_BoxShadow
0 0.0625rem 0.0625rem 0rem rgba(3,3,3,0.05),0 0.25rem 0.5rem 0.25rem rgba(3,3,3,0.06)
--pf-c-switch__toggle--before--Heightc_switch__toggle_before_Height
calc(1rem - 0.125rem)
--pf-c-switch__toggle--before--Leftc_switch__toggle_before_Left
calc((calc(1rem*1.5) - calc(1rem - 0.125rem))/2)
--pf-c-switch__toggle--before--Topc_switch__toggle_before_Top
calc((calc(1rem*1.5) - calc(1rem - 0.125rem))/2)
--pf-c-switch__toggle--before--Transitionc_switch__toggle_before_Transition
transform .25s ease 0s
--pf-c-switch__toggle--before--Widthc_switch__toggle_before_Width
calc(1rem - 0.125rem)
--pf-c-switch__toggle--BorderRadiusc_switch__toggle_BorderRadius
calc(1rem*1.5)
--pf-c-switch__toggle-icon--Colorc_switch__toggle_icon_Color
#fff
--pf-c-switch__toggle-icon--FontSizec_switch__toggle_icon_FontSize
calc(1rem*0.625)
--pf-c-switch__toggle-icon--Leftc_switch__toggle_icon_Left
0
--pf-c-switch__toggle-icon--Offsetc_switch__toggle_icon_Offset
0.125rem
--pf-c-switch__toggle-icon--PaddingLeftc_switch__toggle_icon_PaddingLeft
calc(1rem*0.4)
--pf-c-switch__toggle-icon--Topc_switch__toggle_icon_Top
50%
--pf-c-switch__toggle-icon--Transformc_switch__toggle_icon_Transform
translateY(-50%)
--pf-c-switch--FontSizec_switch_FontSize
1rem
--pf-c-switch--Heightc_switch_Height
calc(1rem*1.5)
--pf-c-switch--LineHeightc_switch_LineHeight
1.5
--pf-c-switch--Widthc_switch_Width
calc(calc(1rem*1.5) + 0.125rem + calc(1rem - 0.125rem))