Skip to content
PatternFly.org Contribute on Github
PatternFly Elements
Versions v5 v4 v3 v2 v1

Switch

A switch provides a toggle control for turning a setting on or off. Each switch MUST have a visible label or an accessible-label attribute. Switches without visible labels SHOULD set show-check-icon. Keyboard: Space or Enter toggles the switch. Uses ARIA switch role via ElementInternals (WCAG 1.3.1, 4.1.2, 2.1.1).

Overview

Togglable option

Installation

npm install @patternfly/elements

Usage

Togglable option
View HTML Source 
<pf-v6-switch checked>Togglable option</pf-v6-switch>

Reversed layout

Use the reversed attribute to place the label before the toggle.

Togglable option
View HTML Source 
<pf-v6-switch reversed checked>Togglable option</pf-v6-switch>

Without label

A switch without a visible label must have an accessible-label attribute to remain accessible.

View HTML Source 
<pf-v6-switch accessible-label="Togglable option" show-check-icon checked></pf-v6-switch>

Disabled

Togglable option Togglable option
View HTML Source 
<pf-v6-switch disabled checked>Togglable option</pf-v6-switch>
<pf-v6-switch disabled>Togglable option</pf-v6-switch>

Slots

Default Slot

Label text displayed beside the switch toggle

Attributes

accessible-label

Accessible label for the switch when there is no visible label text. Should describe the checked state, e.g. "Wi-Fi" (not "Wi-Fi on/off").

DOM Property
accessibleLabel
Type
string
Default
unknown
show-check-icon

Flag to show a check icon on the toggle when checked.

DOM Property
showCheckIcon
Type
boolean
Default
false
checked

Whether the switch is checked.

DOM Property
checked
Type
boolean
Default
false
disabled

Whether the switch is disabled.

DOM Property
disabled
Type
boolean
Default
false
reversed

Reverses the layout so the label appears before the toggle.

DOM Property
reversed
Type
boolean
Default
false
value

Form value defaults to undefined

DOM Property
value
Type
string
Default
unknown

Methods

formResetCallback()

Events

change

Fires when the switch is toggled. Uses the native Event interface with no custom detail payload. Cancelable: call preventDefault() to reject the state change.

Event Type: 
Event

CSS Custom Properties

CSS Property Description Default
--pf-v6-c-switch--ColumnGap

Gap between toggle and label {@default 0.5rem}

 0.5rem
--pf-v6-c-switch--FontSize

Switch font size {@default 0.875rem}

 0.875rem
--pf-v6-c-switch--LineHeight

Switch line height {@default 1.5}

 1.5
--pf-v6-c-switch--Height

Switch container height {@default auto}

 auto
--pf-v6-c-switch__toggle--BackgroundColor

Toggle track background color (unchecked)

 var(--pf-t--global--background--color--control--default, light-dark(#ffffff, #383838))
--pf-v6-c-switch__input--checked__toggle--BackgroundColor

Toggle track background color (checked)

 var(--pf-t--global--color--brand--default, light-dark(#0066cc, #92c5f9))
--pf-v6-c-switch__input--disabled__toggle--BackgroundColor

Toggle track background color (disabled)

 var(--pf-t--global--background--color--disabled--default, light-dark(#c7c7c7, #a3a3a3))
--pf-v6-c-switch__input--not-checked__toggle--before--BackgroundColor

Knob color (unchecked)

 var(--pf-t--global--icon--color--subtle, light-dark(#707070, #a3a3a3))
--pf-v6-c-switch__input--checked__toggle--before--BackgroundColor

Knob color (checked)

 var(--pf-t--global--icon--color--inverse, light-dark(#ffffff, #1f1f1f))
--pf-v6-c-switch__input--disabled__toggle--before--BackgroundColor

Knob color (disabled)

 var(--pf-t--global--icon--color--on-disabled, light-dark(#4d4d4d, #383838))
--pf-v6-c-switch__toggle-icon--Color

Check icon color

 var(--pf-t--global--icon--color--on-brand--default, light-dark(#ffffff, #1f1f1f))
--pf-v6-c-switch__input--not-checked__label--Color

Label color (unchecked)

 var(--pf-t--global--text--color--subtle, light-dark(#4d4d4d, #c7c7c7))
--pf-v6-c-switch__input--checked__label--Color

Label color (checked)

 var(--pf-t--global--text--color--regular, light-dark(#151515, #ffffff))
--pf-v6-c-switch__input--disabled__label--Color

Label color (disabled)

 var(--pf-t--global--text--color--disabled, light-dark(#a3a3a3, #707070))
--pf-v6-c-switch__toggle--BorderRadius

Toggle track border radius

 var(--pf-t--global--border--radius--pill, 999px)
--pf-v6-c-switch__toggle--Width

Toggle track width

 calc(var(--pf-v6-c-switch__toggle--Height, calc(var(--pf-v6-c-switch--FontSize, 0.875rem) * var(--pf-v6-c-switch--LineHeight, 1.5))) + var(--pf-v6-c-switch__toggle-icon--Offset, 0.125rem) + var(--pf-v6-c-switch__toggle--before--Width, calc(var(--pf-v6-c-switch--FontSize, 0.875rem) - var(--pf-v6-c-switch__toggle-icon--Offset, 0.125rem))))
--pf-v6-c-switch__toggle--Height

Toggle track height

 calc(var(--pf-v6-c-switch--FontSize, 0.875rem) * var(--pf-v6-c-switch--LineHeight, 1.5))
--pf-v6-c-switch__toggle--before--Width

Knob width

 calc(var(--pf-v6-c-switch--FontSize, 0.875rem) - var(--pf-v6-c-switch__toggle-icon--Offset, 0.125rem))
--pf-v6-c-switch__toggle--before--Height

Knob height

 var(--pf-v6-c-switch__toggle--before--Width, calc(var(--pf-v6-c-switch--FontSize, 0.875rem) - var(--pf-v6-c-switch__toggle-icon--Offset, 0.125rem)))
--pf-v6-c-switch__toggle--before--BorderRadius

Knob border radius

 var(--pf-t--global--border--radius--large, 24px)
--pf-v6-c-switch__input--focus__toggle--OutlineColor

Focus outline color

 var(--pf-t--global--color--brand--default, light-dark(#0066cc, #92c5f9))
--pf-v6-c-switch__input--focus__toggle--OutlineWidth

Focus outline width

 var(--pf-t--global--border--width--strong, 2px)
--pf-v6-c-switch__input--focus__toggle--OutlineOffset

Focus outline offset

 var(--pf-t--global--spacer--xs, 0.25rem)
--pf-v6-c-switch__toggle-icon--Offset

Offset used in knob and track sizing calculations

 0.125rem
--pf-v6-c-switch__toggle--before--BorderWidth

Knob border width (high-contrast mode)

 var(--pf-t--global--border--width--high-contrast--regular, 0)
--pf-v6-c-switch__toggle--before--Transition

Knob transition shorthand

 translate var(--pf-v6-c-switch__toggle--before--TransitionTimingFunction, var(--pf-t--global--motion--timing-function--default, cubic-bezier(.4, 0, .2, 1))) var(--pf-v6-c-switch__toggle--before--TransitionDuration, var(--pf-t--global--motion--duration--md, 200ms)), background-color var(--pf-v6-c-switch__toggle--before--TransitionTimingFunction, var(--pf-t--global--motion--timing-function--default, cubic-bezier(.4, 0, .2, 1))) var(--pf-v6-c-switch__toggle--before--TransitionDuration, var(--pf-t--global--motion--duration--md, 200ms))
--pf-v6-c-switch__toggle--before--TransitionTimingFunction

Knob transition timing function

 var(--pf-t--global--motion--timing-function--default, cubic-bezier(.4, 0, .2, 1))
--pf-v6-c-switch__toggle--before--TransitionDuration

Knob transition duration

 var(--pf-t--global--motion--duration--md, 200ms)
--pf-v6-c-switch__input--checked__toggle--before--TranslateX

Knob translate distance when checked

 calc(100% + var(--pf-v6-c-switch__toggle-icon--Offset, 0.125rem))
--pf-v6-c-switch__input--disabled__toggle--BorderColor

Toggle border color (disabled)

 var(--pf-t--global--border--color--high-contrast, transparent)
--pf-v6-c-switch__input--checked__toggle--BorderWidth

Toggle border width (checked)

 var(--pf-t--global--border--width--high-contrast--regular, 0)
--pf-v6-c-switch__input--checked__toggle--BorderColor

Toggle border color (checked)

 transparent
--pf-v6-c-switch__input--disabled__toggle-icon--Color

Check icon color (disabled)

 var(--pf-t--global--icon--color--disabled, light-dark(#a3a3a3, #707070))
--pf-v6-c-switch__toggle-icon--FontSize

Check icon font size

 calc(var(--pf-v6-c-switch--FontSize, 0.875rem) * .625)
--pf-v6-c-switch__toggle-icon--InsetInlineStart

Check icon horizontal position

 calc(var(--pf-v6-c-switch--FontSize, 0.875rem) * .4)
--pf-v6-c-switch__toggle--BorderColor

Toggle border color (unchecked)

 var(--pf-t--global--border--color--control--default, light-dark(#c7c7c7, #a3a3a3))
--pf-v6-c-switch__toggle--BorderWidth

Toggle border width (unchecked)

 var(--pf-t--global--border--width--control--default, 1px)
--pf-v6-c-switch__toggle--before--InsetInlineStart

Knob horizontal offset (unchecked)

 calc((var(--pf-v6-c-switch__toggle--Height, calc(var(--pf-v6-c-switch--FontSize, 0.875rem) * var(--pf-v6-c-switch--LineHeight, 1.5))) - var(--pf-v6-c-switch__toggle--before--Height, var(--pf-v6-c-switch__toggle--before--Width, calc(var(--pf-v6-c-switch--FontSize, 0.875rem) - var(--pf-v6-c-switch__toggle-icon--Offset, 0.125rem))))) / 2)
--pf-t--global--background--color--control--default light-dark(#ffffff, #383838)
--pf-t--global--border--color--control--default light-dark(#c7c7c7, #a3a3a3)
--pf-t--global--border--width--control--default 1px
--pf-t--global--icon--color--subtle light-dark(#707070, #a3a3a3)
--pf-t--global--border--radius--large 24px
--pf-t--global--motion--timing-function--default cubic-bezier(.4, 0, .2, 1)
--pf-t--global--motion--duration--md 200ms
--pf-t--global--border--radius--pill 999px
--pf-t--global--border--width--high-contrast--regular 0
--pf-t--global--icon--color--inverse light-dark(#ffffff, #1f1f1f)
--pf-t--global--background--color--disabled--default light-dark(#c7c7c7, #a3a3a3)
--pf-t--global--border--color--high-contrast transparent
--pf-t--global--icon--color--on-disabled light-dark(#4d4d4d, #383838)
--pf-t--global--icon--color--disabled light-dark(#a3a3a3, #707070)
--pf-t--global--icon--color--on-brand--default light-dark(#ffffff, #1f1f1f)
--pf-t--global--text--color--subtle light-dark(#4d4d4d, #c7c7c7)
--pf-t--global--text--color--regular light-dark(#151515, #ffffff)
--pf-t--global--text--color--disabled light-dark(#a3a3a3, #707070)
--pf-t--global--border--width--strong 2px
--pf-t--global--color--brand--default light-dark(#0066cc, #92c5f9)
--pf-t--global--spacer--xs 0.25rem

CSS Shadow Parts

None

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