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">
<span data-state="on">Message when on</span>
<span data-state="off" hidden>Message when off</span>
</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">
<span data-state="on">Message when on</span>
<span data-state="off" hidden>Message when off</span>
</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">
<span data-state="on">Message when on</span>
<span data-state="off" hidden>Message when off</span>
</label>
</fieldset>
<fieldset>
<pf-switch id="default-disabled" disabled></pf-switch>
<label for="default-disabled">
<span data-state="on">Message when on</span>
<span data-state="off" hidden>Message when off</span>
</label>
</fieldset>
</form>
Slots
None
Attributes
label-
Accessible label text for the switch
- DOM Property
label- Type
-
string - Default
-
unknown
show-check-icon-
Flag to show if the switch has a check icon.
- DOM Property
showCheckIcon- Type
-
boolean - Default
-
false
checked-
Flag to show if the switch is checked.
- DOM Property
checked- Type
-
boolean - Default
-
false
disabled-
Flag to show if the switch is disabled.
- DOM Property
disabled- 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))
|
|
--pf-c-switch__input--checked__label--Color |
var(--pf-global--Color--dark-100, #151515)
|
|
--pf-global--Color--dark-100 |
#151515
|
|
--pf-c-switch__input--checked__toggle--BackgroundColor |
var(--pf-global--primary-color--100, #06c)
|
|
--pf-c-switch__input--focus__toggle--OutlineWidth |
var(--pf-global--BorderWidth--md, 2px)
|
|
--pf-global--BorderWidth--md |
2px
|
|
--pf-c-switch__input--focus__toggle--OutlineColor |
var(--pf-global--primary-color--100, #06c)
|
|
--pf-global--primary-color--100 |
#06c
|
|
--pf-c-switch__input--focus__toggle--OutlineOffset |
var(--pf-global--spacer--sm, 0.5rem)
|
|
--pf-global--spacer--sm |
0.5rem
|
|
--pf-c-switch__input--disabled__label--Color |
var(--pf-global--disabled-color--100, #6a6e73)
|
|
--pf-global--disabled-color--100 |
#6a6e73
|
|
--pf-c-switch__input--disabled__toggle--BackgroundColor |
var(--pf-global--disabled-color--200, #d2d2d2)
|
|
--pf-global--disabled-color--200 |
#d2d2d2
|
|
--pf-c-switch__input--disabled__toggle--before--BackgroundColor |
var(--pf-global--palette--black-150, #f5f5f5)
|
|
--pf-global--palette--black-150 |
#f5f5f5
|
|
--pf-c-switch__input--checked__toggle--before--TranslateX |
calc(100% + var(--pf-c-switch__toggle-icon--Offset, 0.125rem))
|
|
--pf-c-switch__toggle--Width |
calc(var(--pf-c-switch__toggle--Height,
calc(var(--pf-c-switch--FontSize,
var(--pf-global--FontSize--md, 1rem)) * var(--pf-c-switch--LineHeight,
var(--pf-global--LineHeight--md, 1.5)))) + var(--pf-c-switch__toggle-icon--Offset, 0.125rem) + var(--pf-c-switch__toggle--before--Width,
calc(var(--pf-c-switch--FontSize,
var(--pf-global--FontSize--md, 1rem)) - var(--pf-c-switch__toggle-icon--Offset, 0.125rem))))
|
|
--pf-c-switch__toggle--BackgroundColor |
var(--pf-global--palette--black-500, #8a8d90)
|
|
--pf-global--palette--black-500 |
#8a8d90
|
|
--pf-c-switch__toggle--BorderRadius |
var(--pf-c-switch__toggle--Height, calc(var(--pf-c-switch--FontSize,
var(--pf-global--FontSize--md, 1rem)) * var(--pf-c-switch--LineHeight,
var(--pf-global--LineHeight--md, 1.5))))
|
|
--pf-c-switch__toggle--before--Left |
var(--pf-c-switch__toggle--before--Top,
calc((var(--pf-c-switch__toggle--Height,
calc(var(--pf-c-switch--FontSize,
var(--pf-global--FontSize--md, 1rem)) * var(--pf-c-switch--LineHeight,
var(--pf-global--LineHeight--md, 1.5)))) - var(--pf-c-switch__toggle--before--Height,
var(--pf-c-switch__toggle--before--Width,
calc(var(--pf-c-switch--FontSize,
var(--pf-global--FontSize--md, 1rem)) - var(--pf-c-switch__toggle-icon--Offset, 0.125rem))))) / 2))
|
|
--pf-c-switch__toggle--before--Top |
calc((var(--pf-c-switch__toggle--Height,
calc(var(--pf-c-switch--FontSize,
var(--pf-global--FontSize--md, 1rem)) * var(--pf-c-switch--LineHeight,
var(--pf-global--LineHeight--md, 1.5)))) - var(--pf-c-switch__toggle--before--Height,
var(--pf-c-switch__toggle--before--Width,
calc(var(--pf-c-switch--FontSize,
var(--pf-global--FontSize--md, 1rem)) - var(--pf-c-switch__toggle-icon--Offset, 0.125rem))))) / 2)
|
|
--pf-c-switch__toggle--Height |
calc(var(--pf-c-switch--FontSize,
var(--pf-global--FontSize--md, 1rem)) * var(--pf-c-switch--LineHeight,
var(--pf-global--LineHeight--md, 1.5)))
|
|
--pf-c-switch--LineHeight |
var(--pf-global--LineHeight--md, 1.5)
|
|
--pf-global--LineHeight--md |
1.5
|
|
--pf-c-switch__toggle--before--Height |
var(--pf-c-switch__toggle--before--Width,
calc(var(--pf-c-switch--FontSize,
var(--pf-global--FontSize--md, 1rem)) - var(--pf-c-switch__toggle-icon--Offset, 0.125rem)))
|
|
--pf-c-switch__toggle--before--Width |
calc(var(--pf-c-switch--FontSize,
var(--pf-global--FontSize--md, 1rem)) - var(--pf-c-switch__toggle-icon--Offset, 0.125rem))
|
|
--pf-c-switch__toggle-icon--Offset |
0.125rem
|
|
--pf-c-switch__toggle--before--backgroundcolor |
var(--pf-global--backgroundcolor--100, #fff)
|
|
--pf-global--backgroundcolor--100 |
#fff
|
|
--pf-c-switch__toggle--before--BorderRadius |
var(--pf-global--BorderRadius--lg, 30em)
|
|
--pf-global--BorderRadius--lg |
30em
|
|
--pf-c-switch__toggle--before--BoxShadow |
var(--pf-global--BoxShadow--md, 0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.12), 0 0 0.25rem 0 rgba(3, 3, 3, 0.06))
|
|
--pf-global--BoxShadow--md |
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 |
translate .25s ease 0s
|
|
--pf-c-switch__toggle-icon--Left |
calc(var(--pf-c-switch--FontSize,
var(--pf-global--FontSize--md, 1rem)) * .4)
|
|
--pf-c-switch__toggle-icon--FontSize |
calc(var(--pf-c-switch--FontSize,
var(--pf-global--FontSize--md, 1rem)) * .625)
|
|
--pf-c-switch--FontSize |
var(--pf-global--FontSize--md, 1rem)
|
|
--pf-global--FontSize--md |
1rem
|
|
--pf-c-switch__toggle-icon--Color |
var(--pf-global--Color--light-100, #fff)
|
|
--pf-global--Color--light-100 |
#fff
|
CSS Shadow Parts
None
