Switch
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.
Installation
We recommend loading elements via a CDN such as JSPM and using an import map to manage your dependencies.
For more information on import maps and how to use them, see the import map reference on MDN Web Docs.
If you are using node and NPM, you can install this component using npm:
npm install @patternfly/elementsThen import this component into your project by using a bare module specifier:
import '@patternfly/elements/pf-switch/pf-switch.js'Please Note: You should either load elements via a CDN or install them locally through NPM. Do not do both.
Overview
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
View HTML Source
<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
View HTML Source
<pf-switch></pf-switch>
Checked with label
View HTML Source
<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
View HTML Source
<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
None
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
