Patternfly Logo

Switch

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

View source on Github