Skip to Content
Patternfly Logo

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

ExamplesDocumentationCSS Variables

Examples

Basic



Without label



Disabled



Documentation

Overview

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<span>Initiates the switch toggle icon wrapper. 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--pf-c-switch--FontSizec_switch_FontSize
1rem
.pf-c-switch--pf-c-switch__toggle-icon--FontSizec_switch__toggle_icon_FontSize
calc(1rem * .625)
.pf-c-switch--pf-c-switch__toggle-icon--Colorc_switch__toggle_icon_Color
#fff
.pf-c-switch--pf-c-switch__toggle-icon--Leftc_switch__toggle_icon_Left
calc(1rem * .4)
.pf-c-switch--pf-c-switch__toggle-icon--Offsetc_switch__toggle_icon_Offset
0.125rem
.pf-c-switch--pf-c-switch--LineHeightc_switch_LineHeight
1.5
.pf-c-switch--pf-c-switch--Heightc_switch_Height
calc(1rem * 1.5)
.pf-c-switch--pf-c-switch__input--checked__toggle--BackgroundColorc_switch__input_checked__toggle_BackgroundColor
#06c
.pf-c-switch--pf-c-switch__input--checked__toggle--before--TranslateXc_switch__input_checked__toggle_before_TranslateX
calc(100% + 0.125rem)
.pf-c-switch--pf-c-switch__input--checked__label--Colorc_switch__input_checked__label_Color
#151515
.pf-c-switch--pf-c-switch__input--not-checked__label--Colorc_switch__input_not_checked__label_Color
#6a6e73
.pf-c-switch--pf-c-switch__input--disabled__label--Colorc_switch__input_disabled__label_Color
#6a6e73
.pf-c-switch--pf-c-switch__input--disabled__toggle--BackgroundColorc_switch__input_disabled__toggle_BackgroundColor
#6a6e73
.pf-c-switch--pf-c-switch__input--disabled__toggle--before--BackgroundColorc_switch__input_disabled__toggle_before_BackgroundColor
#d2d2d2
.pf-c-switch--pf-c-switch__input--focus__toggle--OutlineWidthc_switch__input_focus__toggle_OutlineWidth
2px
.pf-c-switch--pf-c-switch__input--focus__toggle--OutlineOffsetc_switch__input_focus__toggle_OutlineOffset
0.5rem
.pf-c-switch--pf-c-switch__input--focus__toggle--OutlineColorc_switch__input_focus__toggle_OutlineColor
#06c
.pf-c-switch--pf-c-switch__toggle--Heightc_switch__toggle_Height
calc(1rem * 1.5)
.pf-c-switch--pf-c-switch__toggle--BackgroundColorc_switch__toggle_BackgroundColor
#d2d2d2
.pf-c-switch--pf-c-switch__toggle--BorderRadiusc_switch__toggle_BorderRadius
calc(1rem * 1.5)
.pf-c-switch--pf-c-switch__toggle--before--Widthc_switch__toggle_before_Width
calc(1rem - 0.125rem)
.pf-c-switch--pf-c-switch__toggle--before--Heightc_switch__toggle_before_Height
calc(1rem - 0.125rem)
.pf-c-switch--pf-c-switch__toggle--before--Topc_switch__toggle_before_Top
calc((calc(1rem * 1.5) - calc(1rem - 0.125rem)) / 2)
.pf-c-switch--pf-c-switch__toggle--before--Leftc_switch__toggle_before_Left
calc((calc(1rem * 1.5) - calc(1rem - 0.125rem)) / 2)
.pf-c-switch--pf-c-switch__toggle--before--BackgroundColorc_switch__toggle_before_BackgroundColor
#fff
.pf-c-switch--pf-c-switch__toggle--before--BorderRadiusc_switch__toggle_before_BorderRadius
30em
.pf-c-switch--pf-c-switch__toggle--before--BoxShadowc_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--Transitionc_switch__toggle_before_Transition
transform .25s ease 0s
.pf-c-switch--pf-c-switch__toggle--Widthc_switch__toggle_Width
calc(calc(1rem * 1.5) + 0.125rem + calc(1rem - 0.125rem))
.pf-c-switch--pf-c-switch__label--PaddingLeftc_switch__label_PaddingLeft
1rem
.pf-c-switch--pf-c-switch__label--Colorc_switch__label_Color
#151515