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
ExamplesPropsCSS VariablesProps
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| id | string | No | '' | id for the label. |
| className | string | No | '' | Additional classes added to the Switch |
| label | string | No | '' | Text value for the label when on |
| labelOff | string | 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. |
CSS Variables
| --pf-c-switch__input--checked__label--Color | c_switch__input_checked__label_Color | #151515 |
| --pf-c-switch__input--checked__toggle--BackgroundColor | c_switch__input_checked__toggle_BackgroundColor | #06c |
| --pf-c-switch__input--checked__toggle--before--Transform | c_switch__input_checked__toggle_before_Transform | translateX(calc(100% + 0.125rem)) |
| --pf-c-switch__input--disabled__label--Color | c_switch__input_disabled__label_Color | #737679 |
| --pf-c-switch__input--disabled__toggle--BackgroundColor | c_switch__input_disabled__toggle_BackgroundColor | #737679 |
| --pf-c-switch__input--disabled__toggle--before--BackgroundColor | c_switch__input_disabled__toggle_before_BackgroundColor | #d2d2d2 |
| --pf-c-switch__input--focus__toggle--OutlineColor | c_switch__input_focus__toggle_OutlineColor | #06c |
| --pf-c-switch__input--focus__toggle--OutlineOffset | c_switch__input_focus__toggle_OutlineOffset | 0.5rem |
| --pf-c-switch__input--focus__toggle--OutlineWidth | c_switch__input_focus__toggle_OutlineWidth | 2px |
| --pf-c-switch__input--not-checked__label--Color | c_switch__input_not_checked__label_Color | #737679 |
| --pf-c-switch__label--Color | c_switch__label_Color | #151515 |
| --pf-c-switch__label--FontSize | c_switch__label_FontSize | 1rem |
| --pf-c-switch__label--FontWeight | c_switch__label_FontWeight | 400 |
| --pf-c-switch__label--LineHeight | c_switch__label_LineHeight | 1.5 |
| --pf-c-switch__label--PaddingLeft | c_switch__label_PaddingLeft | 1rem |
| --pf-c-switch__toggle--BackgroundColor | c_switch__toggle_BackgroundColor | #d2d2d2 |
| --pf-c-switch__toggle--before--BackgroundColor | c_switch__toggle_before_BackgroundColor | #fff |
| --pf-c-switch__toggle--before--BorderRadius | c_switch__toggle_before_BorderRadius | 30em |
| --pf-c-switch__toggle--before--BoxShadow | c_switch__toggle_before_BoxShadow | 0 0.0625rem 0.0625rem 0rem rgba(3,3,3,0.05),0 0.25rem 0.5rem 0.25rem rgba(3,3,3,0.06) |
| --pf-c-switch__toggle--before--Height | c_switch__toggle_before_Height | calc(1rem - 0.125rem) |
| --pf-c-switch__toggle--before--Left | c_switch__toggle_before_Left | calc((calc(1rem*1.5) - calc(1rem - 0.125rem))/2) |
| --pf-c-switch__toggle--before--Top | c_switch__toggle_before_Top | calc((calc(1rem*1.5) - calc(1rem - 0.125rem))/2) |
| --pf-c-switch__toggle--before--Transition | c_switch__toggle_before_Transition | transform .25s ease 0s |
| --pf-c-switch__toggle--before--Width | c_switch__toggle_before_Width | calc(1rem - 0.125rem) |
| --pf-c-switch__toggle--BorderRadius | c_switch__toggle_BorderRadius | calc(1rem*1.5) |
| --pf-c-switch__toggle-icon--Color | c_switch__toggle_icon_Color | #fff |
| --pf-c-switch__toggle-icon--FontSize | c_switch__toggle_icon_FontSize | calc(1rem*0.625) |
| --pf-c-switch__toggle-icon--Left | c_switch__toggle_icon_Left | 0 |
| --pf-c-switch__toggle-icon--Offset | c_switch__toggle_icon_Offset | 0.125rem |
| --pf-c-switch__toggle-icon--PaddingLeft | c_switch__toggle_icon_PaddingLeft | calc(1rem*0.4) |
| --pf-c-switch__toggle-icon--Top | c_switch__toggle_icon_Top | 50% |
| --pf-c-switch__toggle-icon--Transform | c_switch__toggle_icon_Transform | translateY(-50%) |
| --pf-c-switch--FontSize | c_switch_FontSize | 1rem |
| --pf-c-switch--Height | c_switch_Height | calc(1rem*1.5) |
| --pf-c-switch--LineHeight | c_switch_LineHeight | 1.5 |
| --pf-c-switch--Width | c_switch_Width | calc(calc(1rem*1.5) + 0.125rem + calc(1rem - 0.125rem)) |
