Switch
Overview
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.
A switch toggles the state of a setting (between on and off). Switches provide a more explicit, visible representation on a setting.
Installation
npm install @patternfly/elementsUsage
Basic
<pf-switch id="color-scheme-toggle"></pf-switch>
<label for="color-scheme-toggle" data-state="on">Message when on</label>
<label for="color-scheme-toggle" data-state="off" hidden>Message when off</label>Without label
<pf-switch></pf-switch>Checked with label
<pf-switch id="checked" checked show-check-icon></pf-switch>
<label for="checked" data-state="on">Message when on</label>
<label for="checked" data-state="off">Message when off</label>Disabled
<form>
<fieldset>
<legend>Checked and Disabled</legend>
<pf-switch id="checked-disabled" checked disabled></pf-switch>
<label for="checked-disabled" data-state="on">Message when on</label>
<label for="checked-disabled" data-state="off">Message when off</label>
</fieldset>
<fieldset>
<pf-switch id="default-disabled" disabled></pf-switch>
<label for="default-disabled" data-state="on">Message when on</label>
<label for="default-disabled" data-state="off">Message when off</label>
</fieldset>
</form>Slots
None
Attributes
label- DOM Property
label- Type
-
string | undefined - Default
-
unknown
show-check-icon- DOM Property
showCheckIcon- Type
-
boolean - Default
-
false
checked- DOM Property
checked- Type
-
boolean - Default
-
false
Methods
formDisabledCallback(disabled: boolean)
Events
change-
Fires when the switch selection changes.
Event Type:Event
CSS Custom Properties
| CSS Property | Description | Default |
|---|---|---|
--pf-c-switch--FontSize |
1rem |
|
--pf-c-switch--ColumnGap |
1rem |
|
--pf-c-switch__toggle-icon--FontSize |
calc(1rem * .625) |
|
--pf-c-switch__toggle-icon--Color |
#fff |
|
--pf-c-switch__toggle-icon--Left |
1rem |
|
--pf-c-switch__toggle-icon--Offset |
0.125rem |
|
--pf-c-switch--LineHeight |
1.5 |
|
--pf-c-switch--Height |
auto |
|
--pf-c-switch__input--checked__toggle--BackgroundColor |
#06c |
|
--pf-c-switch__input--checked__toggle--before--TranslateX |
calc(100% + 0.125rem) |
|
--pf-c-switch__input--checked__label--Color |
#151515 |
|
--pf-c-switch__input--not-checked__label--Color |
#6a6e73 |
|
--pf-c-switch__input--disabled__label--Color |
#6a6e73 |
|
--pf-c-switch__input--disabled__toggle--BackgroundColor |
#d2d2d2 |
|
--pf-c-switch__input--disabled__toggle--before--BackgroundColor |
#f5f5f5 |
|
--pf-c-switch__input--focus__toggle--OutlineWidth |
2px |
|
--pf-c-switch__input--focus__toggle--OutlineOffset |
0.5rem |
|
--pf-c-switch__input--focus__toggle--OutlineColor |
#06c |
|
--pf-c-switch__toggle--Height |
calc(1rem * 1.5) |
|
--pf-c-switch__toggle--BackgroundColor |
#8a8d90 |
|
--pf-c-switch__toggle--BorderRadius |
calc(1rem * 1.5) |
|
--pf-c-switch__toggle--before--Width |
calc(1rem - 0.125rem) |
|
--pf-c-switch__toggle--before--Height |
calc(1rem - 0.125rem) |
|
--pf-c-switch__toggle--before--Top |
calc((calc(1rem * 1.5) - calc(1rem - 0.125rem)) / 2) |
|
--pf-c-switch__toggle--before--Left |
calc((calc(1rem * 1.5) - calc(1rem - 0.125rem)) / 2) |
|
--pf-c-switch__toggle--before--BackgroundColor |
#fff |
|
--pf-c-switch__toggle--before--BorderRadius |
30em |
|
--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--Transition |
transform .25s ease 0s |
|
--pf-c-switch__toggle--Width |
calc(calc(1rem * 1.5) + 0.125rem + calc(1rem - 0.125rem)) |
CSS Shadow Parts
None
