React 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 Props CSS Variables Switch properties Name Type Required Default Description id string No '' id for the label. className string No '' Additional classes added to the Switch label React.ReactNode No '' Text value for the label when on labelOff React.ReactNode No '' Text value for the label when off isChecked boolean No true Flag to show if the Switch is checked. isDisabled boolean No false Flag to show if the Switch is disabled. onChange (checked: boolean, event: React.FormEvent<HTMLInputElement>) => void No () => undefined as any A callback for when the Switch selection changes. (isChecked, event) => {} aria-label string No '' Adds accessible text to the Switch, and should describe the isChecked="true" state. When label is defined, aria-label should be set to the text string that is visible when isChecked is true.
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
