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

Simple switch

Copied to clipboard

Switch (no labels)

Copied to clipboard

Switch (disabled)

Copied to clipboard

Switch (uncontrolled)

Copied to clipboard

Props

Switch Props

The Switch component accepts the following props.

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--FontSizec_switch_FontSize1rem
--pf-c-switch--Heightc_switch_Heightcalc(1rem * 1.5)
--pf-c-switch--LineHeightc_switch_LineHeight1.5
--pf-c-switch--Widthc_switch_Widthcalc(calc(1rem * 1.5) + 0.125rem + calc(1rem - 0.125rem))
--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_TransformtranslateX(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_OutlineOffset0.5rem
--pf-c-switch__input--focus__toggle--OutlineWidthc_switch__input_focus__toggle_OutlineWidth2px
--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_FontSize1rem
--pf-c-switch__label--FontWeightc_switch__label_FontWeight400
--pf-c-switch__label--LineHeightc_switch__label_LineHeight1.5
--pf-c-switch__label--PaddingLeftc_switch__label_PaddingLeft1rem
--pf-c-switch__toggle--BackgroundColorc_switch__toggle_BackgroundColor#d2d2d2
--pf-c-switch__toggle--BorderRadiusc_switch__toggle_BorderRadiuscalc(1rem * 1.5)
--pf-c-switch__toggle--before--BackgroundColorc_switch__toggle_before_BackgroundColor#fff
--pf-c-switch__toggle--before--BorderRadiusc_switch__toggle_before_BorderRadius30em
--pf-c-switch__toggle--before--BoxShadowc_switch__toggle_before_BoxShadow0 0.0625rem 0.0625rem 0rem rgba(3,3,3,.05),0 0.25rem 0.5rem 0.25rem rgba(3,3,3,.06)
--pf-c-switch__toggle--before--Heightc_switch__toggle_before_Heightcalc(1rem - 0.125rem)
--pf-c-switch__toggle--before--Leftc_switch__toggle_before_Leftcalc((calc(1rem * 1.5) - calc(1rem - 0.125rem)) / 2)
--pf-c-switch__toggle--before--Topc_switch__toggle_before_Topcalc((calc(1rem * 1.5) - calc(1rem - 0.125rem)) / 2)
--pf-c-switch__toggle--before--Transitionc_switch__toggle_before_Transitiontransform .25s ease 0s
--pf-c-switch__toggle--before--Widthc_switch__toggle_before_Widthcalc(1rem - 0.125rem)
--pf-c-switch__toggle-icon--Colorc_switch__toggle_icon_Color#fff
--pf-c-switch__toggle-icon--FontSizec_switch__toggle_icon_FontSizecalc(1rem * .625)
--pf-c-switch__toggle-icon--Leftc_switch__toggle_icon_Left0
--pf-c-switch__toggle-icon--Offsetc_switch__toggle_icon_Offset0.125rem
--pf-c-switch__toggle-icon--PaddingLeftc_switch__toggle_icon_PaddingLeftcalc(1rem * .4)
--pf-c-switch__toggle-icon--Topc_switch__toggle_icon_Top50%
--pf-c-switch__toggle-icon--Transformc_switch__toggle_icon_TransformtranslateY(-50%)