Examples
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 column | Selector | Variable | Value | |
|---|---|---|---|---|
| .pf-v5-c-switch | --pf-v5-c-switch--FontSize | 1rem | ||
--pf-v5-c-switch--FontSize --pf-v5-global--FontSize--md $pf-v5-global--FontSize--md pf-font-prem(16px) 1rem | ||||
| .pf-v5-c-switch | --pf-v5-c-switch__label--PaddingLeft | 1rem | ||
--pf-v5-c-switch__label--PaddingLeft --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
| .pf-v5-c-switch | --pf-v5-c-switch--ColumnGap | 1rem | ||
--pf-v5-c-switch--ColumnGap --pf-v5-c-switch__label--PaddingLeft --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
| .pf-v5-c-switch | --pf-v5-c-switch__toggle-icon--FontSize | calc(1rem * .625) | ||
--pf-v5-c-switch__toggle-icon--FontSize calc(--pf-v5-c-switch--FontSize * .625) calc(--pf-v5-global--FontSize--md * .625) calc($pf-v5-global--FontSize--md * .625) calc(pf-font-prem(16px) * .625) calc(1rem * .625) | ||||
| .pf-v5-c-switch | --pf-v5-c-switch__toggle-icon--Color | #fff | ||
--pf-v5-c-switch__toggle-icon--Color --pf-v5-global--Color--light-100 $pf-v5-global--Color--light-100 $pf-v5-color-white #fff | ||||
| .pf-v5-c-switch | --pf-v5-c-switch__toggle-icon--Left | calc(1rem * .4) | ||
--pf-v5-c-switch__toggle-icon--Left calc(--pf-v5-c-switch--FontSize * .4) calc(--pf-v5-global--FontSize--md * .4) calc($pf-v5-global--FontSize--md * .4) calc(pf-font-prem(16px) * .4) 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__input--disabled__toggle-icon--Color --pf-v5-global--palette--black-150 $pf-v5-color-black-150 #f5f5f5 | ||||
| .pf-v5-c-switch | --pf-v5-c-switch--LineHeight | 1.5 | ||
--pf-v5-c-switch--LineHeight --pf-v5-global--LineHeight--md $pf-v5-global--LineHeight--md 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__input--checked__toggle--BackgroundColor --pf-v5-global--primary-color--100 $pf-v5-global--primary-color--100 $pf-v5-color-blue-400 #06c | ||||
| .pf-v5-c-switch | --pf-v5-c-switch__input--checked__toggle--before--TranslateX | calc(100% + 0.125rem) | ||
--pf-v5-c-switch__input--checked__toggle--before--TranslateX calc(100% + --pf-v5-c-switch__toggle-icon--Offset) calc(100% + 0.125rem) | ||||
| .pf-v5-c-switch | --pf-v5-c-switch__input--checked__label--Color | #151515 | ||
--pf-v5-c-switch__input--checked__label--Color --pf-v5-global--Color--dark-100 $pf-v5-global--Color--dark-100 $pf-v5-color-black-900 #151515 | ||||
| .pf-v5-c-switch | --pf-v5-c-switch__input--not-checked__label--Color | #6a6e73 | ||
--pf-v5-c-switch__input--not-checked__label--Color --pf-v5-global--disabled-color--100 $pf-v5-global--disabled-color--100 $pf-v5-color-black-600 #6a6e73 | ||||
| .pf-v5-c-switch | --pf-v5-c-switch__input--disabled__label--Color | #6a6e73 | ||
--pf-v5-c-switch__input--disabled__label--Color --pf-v5-global--disabled-color--100 $pf-v5-global--disabled-color--100 $pf-v5-color-black-600 #6a6e73 | ||||
| .pf-v5-c-switch | --pf-v5-c-switch__input--disabled__toggle--BackgroundColor | #d2d2d2 | ||
--pf-v5-c-switch__input--disabled__toggle--BackgroundColor --pf-v5-global--disabled-color--200 $pf-v5-global--disabled-color--200 $pf-v5-color-black-300 #d2d2d2 | ||||
| .pf-v5-c-switch | --pf-v5-c-switch__input--disabled__toggle--before--BackgroundColor | #f5f5f5 | ||
--pf-v5-c-switch__input--disabled__toggle--before--BackgroundColor --pf-v5-global--palette--black-150 $pf-v5-color-black-150 #f5f5f5 | ||||
| .pf-v5-c-switch | --pf-v5-c-switch__input--focus__toggle--OutlineWidth | 2px | ||
--pf-v5-c-switch__input--focus__toggle--OutlineWidth --pf-v5-global--BorderWidth--md $pf-v5-global--BorderWidth--md 2px | ||||
| .pf-v5-c-switch | --pf-v5-c-switch__input--focus__toggle--OutlineOffset | 0.5rem | ||
--pf-v5-c-switch__input--focus__toggle--OutlineOffset --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
| .pf-v5-c-switch | --pf-v5-c-switch__input--focus__toggle--OutlineColor | #06c | ||
--pf-v5-c-switch__input--focus__toggle--OutlineColor --pf-v5-global--primary-color--100 $pf-v5-global--primary-color--100 $pf-v5-color-blue-400 #06c | ||||
| .pf-v5-c-switch | --pf-v5-c-switch__toggle--Height | calc(1rem * 1.5) | ||
--pf-v5-c-switch__toggle--Height calc(--pf-v5-c-switch--FontSize * --pf-v5-c-switch--LineHeight) calc(--pf-v5-global--FontSize--md * --pf-v5-global--LineHeight--md) calc($pf-v5-global--FontSize--md * $pf-v5-global--LineHeight--md) calc(pf-font-prem(16px) * 1.5) calc(1rem * 1.5) | ||||
| .pf-v5-c-switch | --pf-v5-c-switch__toggle--BackgroundColor | #8a8d90 | ||
--pf-v5-c-switch__toggle--BackgroundColor --pf-v5-global--palette--black-500 $pf-v5-color-black-500 #8a8d90 | ||||
| .pf-v5-c-switch | --pf-v5-c-switch__toggle--BorderRadius | calc(1rem * 1.5) | ||
--pf-v5-c-switch__toggle--BorderRadius --pf-v5-c-switch__toggle--Height calc(--pf-v5-c-switch--FontSize * --pf-v5-c-switch--LineHeight) calc(--pf-v5-global--FontSize--md * --pf-v5-global--LineHeight--md) calc($pf-v5-global--FontSize--md * $pf-v5-global--LineHeight--md) calc(pf-font-prem(16px) * 1.5) calc(1rem * 1.5) | ||||
| .pf-v5-c-switch | --pf-v5-c-switch__toggle--before--Width | calc(1rem - 0.125rem) | ||
--pf-v5-c-switch__toggle--before--Width calc(--pf-v5-c-switch--FontSize - --pf-v5-c-switch__toggle-icon--Offset) calc(--pf-v5-global--FontSize--md - 0.125rem) calc($pf-v5-global--FontSize--md - 0.125rem) calc(pf-font-prem(16px) - 0.125rem) calc(1rem - 0.125rem) | ||||
| .pf-v5-c-switch | --pf-v5-c-switch__toggle--before--Height | calc(1rem - 0.125rem) | ||
--pf-v5-c-switch__toggle--before--Height --pf-v5-c-switch__toggle--before--Width calc(--pf-v5-c-switch--FontSize - --pf-v5-c-switch__toggle-icon--Offset) calc(--pf-v5-global--FontSize--md - 0.125rem) calc($pf-v5-global--FontSize--md - 0.125rem) calc(pf-font-prem(16px) - 0.125rem) 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__toggle--before--Top calc((--pf-v5-c-switch__toggle--Height - --pf-v5-c-switch__toggle--before--Height) / 2) calc((calc(--pf-v5-c-switch--FontSize * --pf-v5-c-switch--LineHeight) - --pf-v5-c-switch__toggle--before--Width) / 2) calc((calc(--pf-v5-global--FontSize--md * --pf-v5-global--LineHeight--md) - calc(--pf-v5-c-switch--FontSize - --pf-v5-c-switch__toggle-icon--Offset)) / 2) calc((calc($pf-v5-global--FontSize--md * $pf-v5-global--LineHeight--md) - calc(--pf-v5-global--FontSize--md - 0.125rem)) / 2) calc((calc($pf-v5-global--FontSize--md * $pf-v5-global--LineHeight--md) - calc($pf-v5-global--FontSize--md - 0.125rem)) / 2) calc((calc(pf-font-prem(16px) * 1.5) - calc(pf-font-prem(16px) - 0.125rem)) / 2) 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__toggle--before--Left --pf-v5-c-switch__toggle--before--Top calc((--pf-v5-c-switch__toggle--Height - --pf-v5-c-switch__toggle--before--Height) / 2) calc((calc(--pf-v5-c-switch--FontSize * --pf-v5-c-switch--LineHeight) - --pf-v5-c-switch__toggle--before--Width) / 2) calc((calc(--pf-v5-global--FontSize--md * --pf-v5-global--LineHeight--md) - calc(--pf-v5-c-switch--FontSize - --pf-v5-c-switch__toggle-icon--Offset)) / 2) calc((calc($pf-v5-global--FontSize--md * $pf-v5-global--LineHeight--md) - calc(--pf-v5-global--FontSize--md - 0.125rem)) / 2) calc((calc($pf-v5-global--FontSize--md * $pf-v5-global--LineHeight--md) - calc($pf-v5-global--FontSize--md - 0.125rem)) / 2) calc((calc(pf-font-prem(16px) * 1.5) - calc(pf-font-prem(16px) - 0.125rem)) / 2) 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__toggle--before--BackgroundColor --pf-v5-global--BackgroundColor--100 $pf-v5-global--BackgroundColor--100 $pf-v5-color-white #fff | ||||
| .pf-v5-c-switch | --pf-v5-c-switch__toggle--before--BorderRadius | 30em | ||
--pf-v5-c-switch__toggle--before--BorderRadius --pf-v5-global--BorderRadius--lg $pf-v5-global--BorderRadius--lg 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__toggle--before--BoxShadow --pf-v5-global--BoxShadow--md $pf-v5-global--BoxShadow--md 0 pf-size-prem(4px) pf-size-prem(8px) pf-size-prem(0) rgba($pf-v5-color-black-1000, .12), 0 0 pf-size-prem(4px) 0 rgba($pf-v5-color-black-1000, .06) 0 pf-size-prem(4px) pf-size-prem(8px) pf-size-prem(0) rgba(#030303, .12), 0 0 pf-size-prem(4px) 0 rgba(#030303, .06) 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__toggle--Width calc(--pf-v5-c-switch__toggle--Height + --pf-v5-c-switch__toggle-icon--Offset + --pf-v5-c-switch__toggle--before--Width) calc(calc(--pf-v5-c-switch--FontSize * --pf-v5-c-switch--LineHeight) + 0.125rem + calc(--pf-v5-c-switch--FontSize - --pf-v5-c-switch__toggle-icon--Offset)) calc(calc(--pf-v5-global--FontSize--md * --pf-v5-global--LineHeight--md) + 0.125rem + calc(--pf-v5-global--FontSize--md - 0.125rem)) calc(calc($pf-v5-global--FontSize--md * $pf-v5-global--LineHeight--md) + 0.125rem + calc($pf-v5-global--FontSize--md - 0.125rem)) calc(calc(pf-font-prem(16px) * 1.5) + 0.125rem + calc(pf-font-prem(16px) - 0.125rem)) 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__label--Color --pf-v5-global--Color--dark-100 $pf-v5-global--Color--dark-100 $pf-v5-color-black-900 #151515 | ||||
| .pf-v5-c-switch__input:disabled ~ .pf-v5-c-switch__toggle | --pf-v5-c-switch__toggle-icon--Color | #f5f5f5 | ||
--pf-v5-c-switch__toggle-icon--Color --pf-v5-c-switch__input--disabled__toggle-icon--Color --pf-v5-global--palette--black-150 $pf-v5-color-black-150 #f5f5f5 | ||||
View source on GitHub
