Examples
Props
Switch
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| 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. |
| className | string | No | Additional classes added to the Switch | |
| id | string | No | id for the label. | |
| isChecked | boolean | No | true | Flag to show if the Switch is checked. |
| isDisabled | boolean | No | false | Flag to show if the Switch is disabled. |
| label | React.ReactNode | No | Text value for the label when on | |
| labelOff | React.ReactNode | No | Text value for the label when off | |
| onChange | (checked: boolean, event: React.FormEvent<HTMLInputElement>) => void | No | () => undefined as any | A callback for when the Switch selection changes. (isChecked, event) => {} |
CSS variables
| .pf-c-switch | --pf-c-switch--FontSize | 1rem | |
| .pf-c-switch | --pf-c-switch__label--PaddingLeft | 1rem | |
| .pf-c-switch | --pf-c-switch--ColumnGap | 1rem | |
| .pf-c-switch | --pf-c-switch__toggle-icon--FontSize | calc(1rem * .625) | |
| .pf-c-switch | --pf-c-switch__toggle-icon--Color | #fff | |
| .pf-c-switch | --pf-c-switch__toggle-icon--Left | calc(1rem * .4) | |
| .pf-c-switch | --pf-c-switch__toggle-icon--Offset | 0.125rem | |
| .pf-c-switch | --pf-c-switch--LineHeight | 1.5 | |
| .pf-c-switch | --pf-c-switch--Height | auto | |
| .pf-c-switch | --pf-c-switch__input--checked__toggle--BackgroundColor | #06c | |
| .pf-c-switch | --pf-c-switch__input--checked__toggle--before--TranslateX | calc(100% + 0.125rem) | |
| .pf-c-switch | --pf-c-switch__input--checked__label--Color | #151515 | |
| .pf-c-switch | --pf-c-switch__input--not-checked__label--Color | #6a6e73 | |
| .pf-c-switch | --pf-c-switch__input--disabled__label--Color | #6a6e73 | |
| .pf-c-switch | --pf-c-switch__input--disabled__toggle--BackgroundColor | #6a6e73 | |
| .pf-c-switch | --pf-c-switch__input--disabled__toggle--before--BackgroundColor | #d2d2d2 | |
| .pf-c-switch | --pf-c-switch__input--focus__toggle--OutlineWidth | 2px | |
| .pf-c-switch | --pf-c-switch__input--focus__toggle--OutlineOffset | 0.5rem | |
| .pf-c-switch | --pf-c-switch__input--focus__toggle--OutlineColor | #06c | |
| .pf-c-switch | --pf-c-switch__toggle--Height | calc(1rem * 1.5) | |
| .pf-c-switch | --pf-c-switch__toggle--BackgroundColor | #d2d2d2 | |
| .pf-c-switch | --pf-c-switch__toggle--BorderRadius | calc(1rem * 1.5) | |
| .pf-c-switch | --pf-c-switch__toggle--before--Width | calc(1rem - 0.125rem) | |
| .pf-c-switch | --pf-c-switch__toggle--before--Height | calc(1rem - 0.125rem) | |
| .pf-c-switch | --pf-c-switch__toggle--before--Top | 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 | --pf-c-switch__toggle--before--BackgroundColor | #fff | |
| .pf-c-switch | --pf-c-switch__toggle--before--BorderRadius | 30em | |
| .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 | --pf-c-switch__toggle--before--Transition | transform .25s ease 0s | |
| .pf-c-switch | --pf-c-switch__toggle--Width | calc(calc(1rem * 1.5) + 0.125rem + calc(1rem - 0.125rem)) | |
| .pf-c-switch | --pf-c-switch__label--Color | #151515 | |
View source on GitHub
