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.
Name Type Default Description aria-label string '' 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. className string Additional classes added to the switch defaultChecked boolean Flag to set the default checked value of the switch when it is uncontrolled by React state.
To make the switch controlled instead use the isChecked prop, but do not use both. hasCheckIcon boolean Flag to show if the switch has a check icon. id string id for the label. isChecked boolean true Flag to show if the switch is checked when it is controlled by React state.
To make the switch uncontrolled instead use the defaultChecked prop, but do not use both. isDisabled boolean false Flag to show if the switch is disabled. isReversed boolean false Flag to reverse the layout of toggle and label (toggle on right). label React.ReactNode Text value for the visible label when on labelOff React.ReactNode Text value for the visible label when off onChange (checked: boolean, event: React.FormEvent<HTMLInputElement>) => void () => undefined as any A callback for when the switch selection changes. (isChecked, event) => {}
.pf-c-switch --pf-c-switch--FontSize --pf-c-switch--FontSize
--pf-global--FontSize--md .pf-c-switch --pf-c-switch__label--PaddingLeft --pf-c-switch__label--PaddingLeft
.pf-c-switch --pf-c-switch--ColumnGap --pf-c-switch--ColumnGap
--pf-c-switch__label--PaddingLeft .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--Left --pf-c-switch__toggle-icon--Left
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--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 --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--TranslateX --pf-c-switch__input--checked__toggle--before--TranslateX
calc(100% + --pf-c-switch__toggle-icon--Offset) .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--disabled-color--200 $pf-global--disabled-color--200 .pf-c-switch --pf-c-switch__input--disabled__toggle--before--BackgroundColor --pf-c-switch__input--disabled__toggle--before--BackgroundColor
--pf-global--palette--black-150 .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--Height --pf-c-switch__toggle--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__toggle--BackgroundColor --pf-c-switch__toggle--BackgroundColor
--pf-global--palette--black-500 .pf-c-switch --pf-c-switch__toggle--BorderRadius --pf-c-switch__toggle--BorderRadius
--pf-c-switch__toggle--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__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__toggle--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__toggle--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__toggle--Width calc(calc(1rem * 1.5) + 0.125rem + calc(1rem - 0.125rem))
--pf-c-switch__toggle--Width
calc(--pf-c-switch__toggle--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--Color --pf-c-switch__label--Color
--pf-global--Color--dark-100 $pf-global--Color--dark-100
View source on GitHub Copyright © 2022 Red Hat, Inc.
