Pf V6 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
Installation
npm install @patternfly/elementsUsage
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.
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
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
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 Type:Eventinterface with no custom detail payload. Cancelable: callpreventDefault()to reject the state change.Event
CSS Custom Properties
| CSS Property | Description | Default |
|---|---|---|
--pf-v6-c-switch--ColumnGap |
Gap between toggle and label |
0.5rem
|
--pf-v6-c-switch--Height |
Switch container height |
auto
|
--pf-v6-c-switch__toggle--BackgroundColor |
Toggle track background color (unchecked). Overrides the |
var(--pf-t--global--background--color--control--default, light-dark(#ffffff, #383838))
|
--pf-t--global--background--color--control--default |
light-dark(#ffffff, #383838)
|
|
--pf-v6-c-switch__toggle--BorderColor |
Toggle track border color. Overrides the |
var(--pf-t--global--border--color--control--default, light-dark(#c7c7c7, #a3a3a3))
|
--pf-t--global--border--color--control--default |
light-dark(#c7c7c7, #a3a3a3)
|
|
--pf-v6-c-switch__toggle--BorderWidth |
Toggle track border width. Overrides the |
var(--pf-t--global--border--width--control--default, 1px)
|
--pf-t--global--border--width--control--default |
1px
|
|
--pf-v6-c-switch__input--not-checked__toggle--before--BackgroundColor |
Knob background color (unchecked). Overrides the |
var(--pf-t--global--icon--color--subtle, light-dark(#707070, #a3a3a3))
|
--pf-t--global--icon--color--subtle |
light-dark(#707070, #a3a3a3)
|
|
--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--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-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--LineHeight |
Switch line height |
1.5
|
--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--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--BorderWidth |
var(--pf-t--global--border--width--high-contrast--regular, 0)
|
|
--pf-v6-c-switch__toggle--before--BorderRadius |
Knob border radius. Overrides the |
var(--pf-t--global--border--radius--large, 24px)
|
--pf-t--global--border--radius--large |
24px
|
|
--pf-v6-c-switch__toggle--before--Transition |
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 |
var(--pf-t--global--motion--timing-function--default, cubic-bezier(.4, 0, .2, 1))
|
|
--pf-t--global--motion--timing-function--default |
cubic-bezier(.4, 0, .2, 1)
|
|
--pf-v6-c-switch__toggle--before--TransitionDuration |
Knob transition duration. Overrides the |
var(--pf-t--global--motion--duration--md, 200ms)
|
--pf-t--global--motion--duration--md |
200ms
|
|
--pf-v6-c-switch__toggle--BorderRadius |
Toggle track border radius. Overrides the |
var(--pf-t--global--border--radius--pill, 999px)
|
--pf-t--global--border--radius--pill |
999px
|
|
--pf-v6-c-switch__input--checked__toggle--BackgroundColor |
Toggle track background color (checked). Overrides the |
var(--pf-t--global--color--brand--default, light-dark(#0066cc, #92c5f9))
|
--pf-v6-c-switch__input--checked__toggle--BorderWidth |
Toggle track border width (checked) |
var(--pf-t--global--border--width--high-contrast--regular, 0)
|
--pf-t--global--border--width--high-contrast--regular |
0
|
|
--pf-v6-c-switch__input--checked__toggle--BorderColor |
Toggle track border color (checked) |
transparent
|
--pf-v6-c-switch__input--checked__toggle--before--BackgroundColor |
Knob background color (checked). Overrides the |
var(--pf-t--global--icon--color--inverse, light-dark(#ffffff, #1f1f1f))
|
--pf-t--global--icon--color--inverse |
light-dark(#ffffff, #1f1f1f)
|
|
--pf-v6-c-switch__input--checked__toggle--before--TranslateX |
Knob translate distance (checked). Base offset for knob positioning. |
calc(100% + var(--pf-v6-c-switch__toggle-icon--Offset, 0.125rem))
|
--pf-v6-c-switch__toggle-icon--Offset |
0.125rem
|
|
--pf-v6-c-switch__input--disabled__toggle--BackgroundColor |
Toggle track background color (disabled). Overrides the |
var(--pf-t--global--background--color--disabled--default, light-dark(#c7c7c7, #a3a3a3))
|
--pf-t--global--background--color--disabled--default |
light-dark(#c7c7c7, #a3a3a3)
|
|
--pf-v6-c-switch__input--disabled__toggle--BorderColor |
Toggle track border color (disabled). Overrides the |
var(--pf-t--global--border--color--high-contrast, transparent)
|
--pf-t--global--border--color--high-contrast |
transparent
|
|
--pf-v6-c-switch__input--disabled__toggle--before--BackgroundColor |
Knob background color (disabled). Overrides the |
var(--pf-t--global--icon--color--on-disabled, light-dark(#4d4d4d, #383838))
|
--pf-t--global--icon--color--on-disabled |
light-dark(#4d4d4d, #383838)
|
|
--pf-v6-c-switch__input--disabled__toggle-icon--Color |
Check icon color (disabled). Overrides the |
var(--pf-t--global--icon--color--disabled, light-dark(#a3a3a3, #707070))
|
--pf-t--global--icon--color--disabled |
light-dark(#a3a3a3, #707070)
|
|
--pf-v6-c-switch__toggle-icon--InsetInlineStart |
Check icon horizontal offset |
calc(var(--pf-v6-c-switch--FontSize, 0.875rem) * .4)
|
--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--FontSize |
Switch font size |
0.875rem
|
--pf-v6-c-switch__toggle-icon--Color |
Check icon color. Overrides the |
var(--pf-t--global--icon--color--on-brand--default, light-dark(#ffffff, #1f1f1f))
|
--pf-t--global--icon--color--on-brand--default |
light-dark(#ffffff, #1f1f1f)
|
|
--pf-v6-c-switch__input--not-checked__label--Color |
Label text color (unchecked). Overrides the |
var(--pf-t--global--text--color--subtle, light-dark(#4d4d4d, #c7c7c7))
|
--pf-t--global--text--color--subtle |
light-dark(#4d4d4d, #c7c7c7)
|
|
--pf-v6-c-switch__input--checked__label--Color |
Label text color (checked). Overrides the |
var(--pf-t--global--text--color--regular, light-dark(#151515, #ffffff))
|
--pf-t--global--text--color--regular |
light-dark(#151515, #ffffff)
|
|
--pf-v6-c-switch__input--disabled__label--Color |
Label text color (disabled). Overrides the |
var(--pf-t--global--text--color--disabled, light-dark(#a3a3a3, #707070))
|
--pf-t--global--text--color--disabled |
light-dark(#a3a3a3, #707070)
|
|
--pf-v6-c-switch__input--focus__toggle--OutlineWidth |
var(--pf-t--global--border--width--strong, 2px)
|
|
--pf-t--global--border--width--strong |
2px
|
|
--pf-v6-c-switch__input--focus__toggle--OutlineColor |
var(--pf-t--global--color--brand--default, light-dark(#0066cc, #92c5f9))
|
|
--pf-t--global--color--brand--default |
light-dark(#0066cc, #92c5f9)
|
|
--pf-v6-c-switch__input--focus__toggle--OutlineOffset |
var(--pf-t--global--spacer--xs, 0.25rem)
|
|
--pf-t--global--spacer--xs |
0.25rem
|
CSS Shadow Parts
None
