PatternFly Elements

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/elements

Usage

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

Checked and 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

© 2018-2023 Red Hat, Inc. Deploys by Netlify