Skip to content
Versions v3 v2 v1

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

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

Usage

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

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

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-2024 Red Hat, Inc. Deploys by Netlify