* required
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 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. 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 label when on labelOff React.ReactNode Text value for the 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 
