PatternFly

Switch

A switch toggles 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.

Examples

Basic



Reverse (toggle on right)



Label and check



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

Attribute
Applied to
Outcome
aria-labelledby="..." or aria-label="..."
.pf-v5-c-switch__input
Indicates the action triggered by the switch. If an additional text label is included with the switch besides .pf-v5-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-v5-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-v5-c-switch__label
Each .pf-v5-c-switch__label must have an id attribute that matches the aria-labelledby on .pf-v5-c-switch__input.
checked
.pf-v5-c-switch__input
Indicates that the input is checked
disabled
.pf-v5-c-switch__input
Indicates that the input is disabled
aria-hidden="true"
.pf-v5-c-switch__label
Hides the text from the screen reader.

Usage

Class
Applied to
Outcome
.pf-v5-c-switch
<label>
Initiates a switch. Required
.pf-v5-c-switch__input
<input type="checkbox">
Hide the checkbox inside the switch. Required
.pf-v5-c-switch__toggle
<span>
Initiates the toggle inside the switch. Required
.pf-v5-c-switch__toggle-icon
<span>
Initiates the switch toggle icon wrapper. Required when the switch is used without a label
.pf-v5-c-switch__label
<span>
Initiates a label inside the switch.
.pf-m-on
.pf-v5-c-switch__label
Modifies the switch label to display the on message.
.pf-m-off
.pf-v5-c-switch__label
Modifies the switch label to display the off message.
.pf-m-reverse
.pf-v5-c-switch
Positions the switch toggle to the right of the label.

CSS variables

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

View source on GitHub