Skip to content
PatternFly.org Contribute on Github
PatternFly Elements
Versions v4 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
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__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

Width of the toggle

 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

Background color of the toggle

 var(--pf-global--palette--black-500, #8a8d90)
--pf-global--palette--black-500 #8a8d90
--pf-c-switch__toggle--BorderRadius

Border radius of the toggle

 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

Left position of the toggle knob

 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

Top position of the toggle knob

 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

Height of the toggle knob

 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

Width of the toggle knob

 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

Background color of the toggle knob

 var(--pf-global--backgroundcolor--100, #fff)
--pf-global--backgroundcolor--100 #fff
--pf-c-switch__toggle--before--BorderRadius

Border radius of the toggle knob

 var(--pf-global--BorderRadius--lg, 30em)
--pf-global--BorderRadius--lg 30em
--pf-c-switch__toggle--before--BoxShadow

Box shadow of the toggle knob

 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

Transition of the toggle knob

 translate .25s ease 0s
--pf-c-switch__toggle-icon--Left

Horizontal margin of the toggle icon

 calc(var(--pf-c-switch--FontSize, var(--pf-global--FontSize--md, 1rem)) * .4)
--pf-c-switch__toggle-icon--FontSize

Font size of the toggle icon

 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

Color of the toggle icon

 var(--pf-global--Color--light-100, #fff)
--pf-global--Color--light-100 #fff

CSS Shadow Parts

None

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