Switch

A switch is a control that toggles the state of a setting between on and off.

Examples

Basic

Reverse (toggle on right)

Label and check icon

Without visible text 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-v6-c-switch__input
Indicates the behavior of the switch. This label should never dynamically change, and should always describe the behavior of the switch when its checked state is true. If an additional text label is included with the switch besides .pf-v6-c-switch__label, then aria-labelledby can reference the id of this text, but it must be in addition to the text of .pf-v6-c-switch__label. If there is no visible text label provided, then an aria-label must be provided. 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
role="switch"
<input type="checkbox">
Exposes the element as a switch for assistive technologies. Required
id
.pf-v6-c-switch__label
Each .pf-v6-c-switch__label must have an id attribute that matches the aria-labelledby on .pf-v6-c-switch__input.
checked
.pf-v6-c-switch__input
Indicates that the input is checked
disabled
.pf-v6-c-switch__input
Indicates that the input is disabled
aria-hidden="true"
.pf-v6-c-switch__label
Hides the text from the screen reader.

Usage

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

CSS variables

Expand or collapse columnSelectorVariableValue
:where(:root, .pf-v6-c-switch)--pf-v6-c-switch--FontSize
0.875rem
:where(:root, .pf-v6-c-switch)--pf-v6-c-switch--ColumnGap
0.5rem
:where(:root, .pf-v6-c-switch)--pf-v6-c-switch__toggle-icon--FontSize
calc(0.875rem * .625)
:where(:root, .pf-v6-c-switch)--pf-v6-c-switch__toggle-icon--Color
(In light theme) #ffffff
:where(:root, .pf-v6-c-switch)--pf-v6-c-switch__toggle-icon--InsetInlineStart
calc(0.875rem * .4)
:where(:root, .pf-v6-c-switch)--pf-v6-c-switch__toggle-icon--Offset
0.125rem
:where(:root, .pf-v6-c-switch)--pf-v6-c-switch__input--disabled__toggle-icon--Color
(In light theme) #a3a3a3
:where(:root, .pf-v6-c-switch)--pf-v6-c-switch--LineHeight
1.5
:where(:root, .pf-v6-c-switch)--pf-v6-c-switch--Height
auto
:where(:root, .pf-v6-c-switch)--pf-v6-c-switch__input--checked__toggle--BackgroundColor
(In light theme) #0066cc
:where(:root, .pf-v6-c-switch)--pf-v6-c-switch__input--checked__toggle--before--TranslateX
calc(100% + 0.125rem)
:where(:root, .pf-v6-c-switch)--pf-v6-c-switch__input--checked__toggle--BorderWidth
0
:where(:root, .pf-v6-c-switch)--pf-v6-c-switch__input--checked__label--Color
(In light theme) #151515
:where(:root, .pf-v6-c-switch)--pf-v6-c-switch__input--not-checked__label--Color
(In light theme) #4d4d4d
:where(:root, .pf-v6-c-switch)--pf-v6-c-switch__input--disabled__label--Color
(In light theme) #a3a3a3
:where(:root, .pf-v6-c-switch)--pf-v6-c-switch__input--disabled__toggle--BackgroundColor
(In light theme) #c7c7c7
:where(:root, .pf-v6-c-switch)--pf-v6-c-switch__input--checked__toggle--before--BackgroundColor
(In light theme) #ffffff
:where(:root, .pf-v6-c-switch)--pf-v6-c-switch__input--not-checked__toggle--before--BackgroundColor
(In light theme) #707070
:where(:root, .pf-v6-c-switch)--pf-v6-c-switch__input--disabled__toggle--before--BackgroundColor
(In light theme) #4d4d4d
:where(:root, .pf-v6-c-switch)--pf-v6-c-switch__input--focus__toggle--OutlineWidth
2px
:where(:root, .pf-v6-c-switch)--pf-v6-c-switch__input--focus__toggle--OutlineOffset
0.25rem
:where(:root, .pf-v6-c-switch)--pf-v6-c-switch__input--focus__toggle--OutlineColor
(In light theme) #0066cc
:where(:root, .pf-v6-c-switch)--pf-v6-c-switch__toggle--Height
calc(0.875rem * 1.5)
:where(:root, .pf-v6-c-switch)--pf-v6-c-switch__toggle--BackgroundColor
(In light theme) #ffffff
:where(:root, .pf-v6-c-switch)--pf-v6-c-switch__toggle--BorderColor
(In light theme) #c7c7c7
:where(:root, .pf-v6-c-switch)--pf-v6-c-switch__toggle--BorderWidth
1px
:where(:root, .pf-v6-c-switch)--pf-v6-c-switch__toggle--BorderRadius
999px
:where(:root, .pf-v6-c-switch)--pf-v6-c-switch__toggle--before--Width
calc(0.875rem - 0.125rem)
:where(:root, .pf-v6-c-switch)--pf-v6-c-switch__toggle--before--Height
calc(0.875rem - 0.125rem)
:where(:root, .pf-v6-c-switch)--pf-v6-c-switch__toggle--before--InsetInlineStart
calc((calc(0.875rem * 1.5) - calc(0.875rem - 0.125rem)) / 2)
:where(:root, .pf-v6-c-switch)--pf-v6-c-switch__toggle--before--BorderRadius
24px
:where(:root, .pf-v6-c-switch)--pf-v6-c-switch__toggle--before--Transition
transform .25s ease 0s
:where(:root, .pf-v6-c-switch)--pf-v6-c-switch__toggle--Width
calc(calc(0.875rem * 1.5) + 0.125rem + calc(0.875rem - 0.125rem))
.pf-v6-c-switch__input:checked ~ .pf-v6-c-switch__toggle--pf-v6-c-switch__toggle--BorderWidth
0
.pf-v6-c-switch__input:disabled ~ .pf-v6-c-switch__toggle--pf-v6-c-switch__toggle-icon--Color
(In light theme) #a3a3a3