HTML 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
Examples Documentation CSS Variables 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.
Attribute Applied to Outcome 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.
Class Applied to Outcome .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.
Selector Variable React Token Value .pf-c-switch --pf-c-switch--FontSize --pf-c-switch--FontSize
--pf-global--FontSize--md .pf-c-switch --pf-c-switch__toggle-icon--FontSize --pf-c-switch__toggle-icon--FontSize
calc(--pf-c-switch--FontSize * .625) calc(--pf-global--FontSize--md * .625) calc($pf-global--FontSize--md * .625) calc(pf-font-prem(16px) * .625) .pf-c-switch --pf-c-switch__toggle-icon--Color --pf-c-switch__toggle-icon--Color
--pf-global--Color--light-100 $pf-global--Color--light-100 .pf-c-switch --pf-c-switch__toggle-icon--PaddingLeft --pf-c-switch__toggle-icon--PaddingLeft
calc(--pf-c-switch--FontSize * .4) calc(--pf-global--FontSize--md * .4) calc($pf-global--FontSize--md * .4) calc(pf-font-prem(16px) * .4) .pf-c-switch --pf-c-switch__toggle-icon--Top .pf-c-switch --pf-c-switch__toggle-icon--Left .pf-c-switch --pf-c-switch__toggle-icon--Transform .pf-c-switch --pf-c-switch__toggle-icon--Offset .pf-c-switch --pf-c-switch--LineHeight --pf-c-switch--LineHeight
--pf-global--LineHeight--md $pf-global--LineHeight--md .pf-c-switch --pf-c-switch--Height --pf-c-switch--Height
calc(--pf-c-switch--FontSize * --pf-c-switch--LineHeight) calc(--pf-global--FontSize--md * --pf-global--LineHeight--md) calc($pf-global--FontSize--md * $pf-global--LineHeight--md) calc(pf-font-prem(16px) * 1.5) .pf-c-switch --pf-c-switch__input--checked__toggle--BackgroundColor --pf-c-switch__input--checked__toggle--BackgroundColor
--pf-global--primary-color--100 $pf-global--primary-color--100 .pf-c-switch --pf-c-switch__input--checked__toggle--before--Transform translateX(calc(100% + 0.125rem))
--pf-c-switch__input--checked__toggle--before--Transform
translateX(calc(100% + --pf-c-switch__toggle-icon--Offset)) translateX(calc(100% + 0.125rem)) .pf-c-switch --pf-c-switch__input--checked__label--Color --pf-c-switch__input--checked__label--Color
--pf-global--Color--dark-100 $pf-global--Color--dark-100 .pf-c-switch --pf-c-switch__input--not-checked__label--Color --pf-c-switch__input--not-checked__label--Color
--pf-global--disabled-color--100 $pf-global--disabled-color--100 .pf-c-switch --pf-c-switch__input--disabled__label--Color --pf-c-switch__input--disabled__label--Color
--pf-global--disabled-color--100 $pf-global--disabled-color--100 .pf-c-switch --pf-c-switch__input--disabled__toggle--BackgroundColor --pf-c-switch__input--disabled__toggle--BackgroundColor
--pf-global--Color--dark-200 $pf-global--Color--dark-200 .pf-c-switch --pf-c-switch__input--disabled__toggle--before--BackgroundColor --pf-c-switch__input--disabled__toggle--before--BackgroundColor
--pf-global--disabled-color--200 $pf-global--disabled-color--200 .pf-c-switch --pf-c-switch__input--focus__toggle--OutlineWidth --pf-c-switch__input--focus__toggle--OutlineWidth
--pf-global--BorderWidth--md $pf-global--BorderWidth--md .pf-c-switch --pf-c-switch__input--focus__toggle--OutlineOffset --pf-c-switch__input--focus__toggle--OutlineOffset
.pf-c-switch --pf-c-switch__input--focus__toggle--OutlineColor --pf-c-switch__input--focus__toggle--OutlineColor
--pf-global--primary-color--100 $pf-global--primary-color--100 .pf-c-switch --pf-c-switch__toggle--BackgroundColor --pf-c-switch__toggle--BackgroundColor
--pf-global--disabled-color--200 $pf-global--disabled-color--200 .pf-c-switch --pf-c-switch__toggle--BorderRadius --pf-c-switch__toggle--BorderRadius
calc(--pf-c-switch--FontSize * --pf-c-switch--LineHeight) calc(--pf-global--FontSize--md * --pf-global--LineHeight--md) calc($pf-global--FontSize--md * $pf-global--LineHeight--md) calc(pf-font-prem(16px) * 1.5) .pf-c-switch --pf-c-switch__toggle--before--Width --pf-c-switch__toggle--before--Width
calc(--pf-c-switch--FontSize - --pf-c-switch__toggle-icon--Offset) calc(--pf-global--FontSize--md - 0.125rem) calc($pf-global--FontSize--md - 0.125rem) calc(pf-font-prem(16px) - 0.125rem) .pf-c-switch --pf-c-switch__toggle--before--Height --pf-c-switch__toggle--before--Height
--pf-c-switch__toggle--before--Width calc(--pf-c-switch--FontSize - --pf-c-switch__toggle-icon--Offset) calc(--pf-global--FontSize--md - 0.125rem) calc($pf-global--FontSize--md - 0.125rem) calc(pf-font-prem(16px) - 0.125rem) .pf-c-switch --pf-c-switch__toggle--before--Top calc((calc(1rem * 1.5) - calc(1rem - 0.125rem)) / 2)
--pf-c-switch__toggle--before--Top
calc((--pf-c-switch--Height - --pf-c-switch__toggle--before--Height) / 2) calc((calc(--pf-c-switch--FontSize * --pf-c-switch--LineHeight) - --pf-c-switch__toggle--before--Width) / 2) calc((calc(--pf-global--FontSize--md * --pf-global--LineHeight--md) - calc(--pf-c-switch--FontSize - --pf-c-switch__toggle-icon--Offset)) / 2) calc((calc($pf-global--FontSize--md * $pf-global--LineHeight--md) - calc(--pf-global--FontSize--md - 0.125rem)) / 2) calc((calc($pf-global--FontSize--md * $pf-global--LineHeight--md) - calc($pf-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-c-switch --pf-c-switch__toggle--before--Left calc((calc(1rem * 1.5) - calc(1rem - 0.125rem)) / 2)
--pf-c-switch__toggle--before--Left
--pf-c-switch__toggle--before--Top calc((--pf-c-switch--Height - --pf-c-switch__toggle--before--Height) / 2) calc((calc(--pf-c-switch--FontSize * --pf-c-switch--LineHeight) - --pf-c-switch__toggle--before--Width) / 2) calc((calc(--pf-global--FontSize--md * --pf-global--LineHeight--md) - calc(--pf-c-switch--FontSize - --pf-c-switch__toggle-icon--Offset)) / 2) calc((calc($pf-global--FontSize--md * $pf-global--LineHeight--md) - calc(--pf-global--FontSize--md - 0.125rem)) / 2) calc((calc($pf-global--FontSize--md * $pf-global--LineHeight--md) - calc($pf-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-c-switch --pf-c-switch__toggle--before--BackgroundColor --pf-c-switch__toggle--before--BackgroundColor
--pf-global--BackgroundColor--100 $pf-global--BackgroundColor--100 .pf-c-switch --pf-c-switch__toggle--before--BorderRadius --pf-c-switch__toggle--before--BorderRadius
--pf-global--BorderRadius--lg $pf-global--BorderRadius--lg .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__toggle--before--BoxShadow
--pf-global--BoxShadow--md $pf-global--BoxShadow--md 0 pf-size-prem(4px) pf-size-prem(8px) pf-size-prem(0) rgba($pf-color-black-1000, .12), 0 0 pf-size-prem(4px) 0 rgba($pf-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-c-switch --pf-c-switch__toggle--before--Transition .pf-c-switch --pf-c-switch--Width calc(calc(1rem * 1.5) + 0.125rem + calc(1rem - 0.125rem))
--pf-c-switch--Width
calc(--pf-c-switch--Height + --pf-c-switch__toggle-icon--Offset + --pf-c-switch__toggle--before--Width) calc(calc(--pf-c-switch--FontSize * --pf-c-switch--LineHeight) + 0.125rem + calc(--pf-c-switch--FontSize - --pf-c-switch__toggle-icon--Offset)) calc(calc(--pf-global--FontSize--md * --pf-global--LineHeight--md) + 0.125rem + calc(--pf-global--FontSize--md - 0.125rem)) calc(calc($pf-global--FontSize--md * $pf-global--LineHeight--md) + 0.125rem + calc($pf-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-c-switch --pf-c-switch__label--PaddingLeft --pf-c-switch__label--PaddingLeft
.pf-c-switch --pf-c-switch__label--FontSize --pf-c-switch__label--FontSize
--pf-global--FontSize--md .pf-c-switch --pf-c-switch__label--FontWeight --pf-c-switch__label--FontWeight
--pf-global--FontWeight--normal $pf-global--FontWeight--normal .pf-c-switch --pf-c-switch__label--LineHeight --pf-c-switch__label--LineHeight
--pf-c-switch--LineHeight --pf-global--LineHeight--md $pf-global--LineHeight--md .pf-c-switch --pf-c-switch__label--Color --pf-c-switch__label--Color
--pf-global--Color--dark-100 $pf-global--Color--dark-100
