HTML

Switch

ExamplesDocumentationCSS Variables

Examples

Basic



Without label



Disabled



Documentation

Overiew

A switch is an alternative to the checkbox component.

Use a switch when your user needs to perform instantaneous actions without confirmation.

Use checkbox if your user has to perform additional steps for changes to become effective.

Accessibility

AttributeApplied toOutcome
aria-labelledby="..." or aria-label="...".pf-c-switch__inputIndicates the action triggered by the switch. If an additional text label is included with the switch besides .pf-c-switch__label.pf-m-on, then aria-labelledby can reference the id of this text, or this text can be used as the value for aria-label. If the text included for .pf-c-switch__label.pf-m-on provides additional meaning to the primary label that's referenced, then it can also be represented as part of the aria-labelledby or aria-label attribute. Required
for<label>Each <label> must have a for attribute that matches its input id. Required
id<input type="checkbox">Each <input> must have an id attribute that matches its label's for value. Required
id.pf-c-switch__labelEach .pf-c-switch__label must have an id attribute that matches the aria-labelledby on .pf-c-switch__input.
checked.pf-c-switch__inputIndicates that the input is checked
disabled.pf-c-switch__inputIndicates that the input is disabled
aria-hidden="true".pf-c-switch__labelHides the text from the screen reader.

Usage

ClassApplied toOutcome
.pf-c-switch<label>Initiates a switch. Required
.pf-c-switch__input<input type="checkbox">Hide the checkbox inside the switch. Required
.pf-c-switch__toggle<span>Initiates the toggle inside the switch. Required
.pf-c-switch__toggle-icon<i>Initiates an icon inside the switch toggle. Required when the switch is used without a label
.pf-c-switch__label<span>Initiates a label inside the switch.
.pf-m-on.pf-c-switch__labelModifies the switch label to display the on message.
.pf-m-off.pf-c-switch__labelModifies the switch label to display the off message.

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))