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.

Examples

Basic

Reversed Layout

Without label

Checked with label

Disabled

Uncontrolled

Props

Switch

*required
Name	Type	Default	Description
aria-label	string	''	Adds accessible text to the switch, and should describe the isChecked="true" state. When label is defined, aria-label should be set to the text string that is visible when isChecked is true.
className	string		Additional classes added to the switch
defaultChecked	boolean		Flag to set the default checked value of the switch when it is uncontrolled by React state. To make the switch controlled instead use the isChecked prop, but do not use both.
hasCheckIcon	boolean		Flag to show if the switch has a check icon.
id	string		id for the label.
isChecked	boolean	true	Flag to show if the switch is checked when it is controlled by React state. To make the switch uncontrolled instead use the defaultChecked prop, but do not use both.
isDisabled	boolean	false	Flag to show if the switch is disabled.
isReversed	boolean	false	Flag to reverse the layout of toggle and label (toggle on right).
label	React.ReactNode		Text value for the visible label when on
labelOff	React.ReactNode		Text value for the visible label when off
onChange	(checked: boolean, event: React.FormEvent<HTMLInputElement>) => void	() => undefined as any	A callback for when the switch selection changes. (isChecked, event) => {}
ouiaId	number \| string		Value to overwrite the randomly generated data-ouia-component-id.
ouiaSafe	boolean		Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false.

CSS variables


	.pf-c-switch	--pf-c-switch--FontSize	1rem
--pf-c-switch--FontSize --pf-global--FontSize--md $pf-global--FontSize--md pf-font-prem(16px) 1rem
	.pf-c-switch	--pf-c-switch__label--PaddingLeft	1rem
--pf-c-switch__label--PaddingLeft --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-switch	--pf-c-switch--ColumnGap	1rem
--pf-c-switch--ColumnGap --pf-c-switch__label--PaddingLeft --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-switch	--pf-c-switch__toggle-icon--FontSize	calc(1rem * .625)
--pf-c-switch__toggle-icon--FontSize calc(--pf-c-switch--FontSize * .625) calc(--pf-global--FontSize--md * .625) calc($pf-global--FontSize--md * .625) calc(pf-font-prem(16px) * .625) calc(1rem * .625)
	.pf-c-switch	--pf-c-switch__toggle-icon--Color	#fff
--pf-c-switch__toggle-icon--Color --pf-global--Color--light-100 $pf-global--Color--light-100 $pf-color-white #fff
	.pf-c-switch	--pf-c-switch__toggle-icon--Left	calc(1rem * .4)
--pf-c-switch__toggle-icon--Left calc(--pf-c-switch--FontSize * .4) calc(--pf-global--FontSize--md * .4) calc($pf-global--FontSize--md * .4) calc(pf-font-prem(16px) * .4) calc(1rem * .4)
	.pf-c-switch	--pf-c-switch__toggle-icon--Offset	0.125rem
	.pf-c-switch	--pf-c-switch--LineHeight	1.5
--pf-c-switch--LineHeight --pf-global--LineHeight--md $pf-global--LineHeight--md 1.5
	.pf-c-switch	--pf-c-switch--Height	auto
	.pf-c-switch	--pf-c-switch__input--checked__toggle--BackgroundColor	#06c
--pf-c-switch__input--checked__toggle--BackgroundColor --pf-global--primary-color--100 $pf-global--primary-color--100 $pf-color-blue-400 #06c
	.pf-c-switch	--pf-c-switch__input--checked__toggle--before--TranslateX	calc(100% + 0.125rem)
--pf-c-switch__input--checked__toggle--before--TranslateX calc(100% + --pf-c-switch__toggle-icon--Offset) calc(100% + 0.125rem)
	.pf-c-switch	--pf-c-switch__input--checked__label--Color	#151515
--pf-c-switch__input--checked__label--Color --pf-global--Color--dark-100 $pf-global--Color--dark-100 $pf-color-black-900 #151515
	.pf-c-switch	--pf-c-switch__input--not-checked__label--Color	#6a6e73
--pf-c-switch__input--not-checked__label--Color --pf-global--disabled-color--100 $pf-global--disabled-color--100 $pf-color-black-600 #6a6e73
	.pf-c-switch	--pf-c-switch__input--disabled__label--Color	#6a6e73
--pf-c-switch__input--disabled__label--Color --pf-global--disabled-color--100 $pf-global--disabled-color--100 $pf-color-black-600 #6a6e73
	.pf-c-switch	--pf-c-switch__input--disabled__toggle--BackgroundColor	#d2d2d2
--pf-c-switch__input--disabled__toggle--BackgroundColor --pf-global--disabled-color--200 $pf-global--disabled-color--200 $pf-color-black-300 #d2d2d2
	.pf-c-switch	--pf-c-switch__input--disabled__toggle--before--BackgroundColor	#f5f5f5
--pf-c-switch__input--disabled__toggle--before--BackgroundColor --pf-global--palette--black-150 $pf-color-black-150 #f5f5f5
	.pf-c-switch	--pf-c-switch__input--focus__toggle--OutlineWidth	2px
--pf-c-switch__input--focus__toggle--OutlineWidth --pf-global--BorderWidth--md $pf-global--BorderWidth--md 2px
	.pf-c-switch	--pf-c-switch__input--focus__toggle--OutlineOffset	0.5rem
--pf-c-switch__input--focus__toggle--OutlineOffset --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-switch	--pf-c-switch__input--focus__toggle--OutlineColor	#06c
--pf-c-switch__input--focus__toggle--OutlineColor --pf-global--primary-color--100 $pf-global--primary-color--100 $pf-color-blue-400 #06c
	.pf-c-switch	--pf-c-switch__toggle--Height	calc(1rem * 1.5)
--pf-c-switch__toggle--Height calc(--pf-c-switch--FontSize * --pf-c-switch--LineHeight) calc(--pf-global--FontSize--md * --pf-global--LineHeight--md) calc($pf-global--FontSize--md * $pf-global--LineHeight--md) calc(pf-font-prem(16px) * 1.5) calc(1rem * 1.5)
	.pf-c-switch	--pf-c-switch__toggle--BackgroundColor	#8a8d90
--pf-c-switch__toggle--BackgroundColor --pf-global--palette--black-500 $pf-color-black-500 #8a8d90
	.pf-c-switch	--pf-c-switch__toggle--BorderRadius	calc(1rem * 1.5)
--pf-c-switch__toggle--BorderRadius --pf-c-switch__toggle--Height calc(--pf-c-switch--FontSize * --pf-c-switch--LineHeight) calc(--pf-global--FontSize--md * --pf-global--LineHeight--md) calc($pf-global--FontSize--md * $pf-global--LineHeight--md) calc(pf-font-prem(16px) * 1.5) calc(1rem * 1.5)
	.pf-c-switch	--pf-c-switch__toggle--before--Width	calc(1rem - 0.125rem)
--pf-c-switch__toggle--before--Width calc(--pf-c-switch--FontSize - --pf-c-switch__toggle-icon--Offset) calc(--pf-global--FontSize--md - 0.125rem) calc($pf-global--FontSize--md - 0.125rem) calc(pf-font-prem(16px) - 0.125rem) calc(1rem - 0.125rem)
	.pf-c-switch	--pf-c-switch__toggle--before--Height	calc(1rem - 0.125rem)
--pf-c-switch__toggle--before--Height --pf-c-switch__toggle--before--Width calc(--pf-c-switch--FontSize - --pf-c-switch__toggle-icon--Offset) calc(--pf-global--FontSize--md - 0.125rem) calc($pf-global--FontSize--md - 0.125rem) calc(pf-font-prem(16px) - 0.125rem) calc(1rem - 0.125rem)
	.pf-c-switch	--pf-c-switch__toggle--before--Top	calc((calc(1rem * 1.5) - calc(1rem - 0.125rem)) / 2)
--pf-c-switch__toggle--before--Top calc((--pf-c-switch__toggle--Height - --pf-c-switch__toggle--before--Height) / 2) calc((calc(--pf-c-switch--FontSize * --pf-c-switch--LineHeight) - --pf-c-switch__toggle--before--Width) / 2) calc((calc(--pf-global--FontSize--md * --pf-global--LineHeight--md) - calc(--pf-c-switch--FontSize - --pf-c-switch__toggle-icon--Offset)) / 2) calc((calc($pf-global--FontSize--md * $pf-global--LineHeight--md) - calc(--pf-global--FontSize--md - 0.125rem)) / 2) calc((calc($pf-global--FontSize--md * $pf-global--LineHeight--md) - calc($pf-global--FontSize--md - 0.125rem)) / 2) calc((calc(pf-font-prem(16px) * 1.5) - calc(pf-font-prem(16px) - 0.125rem)) / 2) calc((calc(1rem * 1.5) - calc(1rem - 0.125rem)) / 2)
	.pf-c-switch	--pf-c-switch__toggle--before--Left	calc((calc(1rem * 1.5) - calc(1rem - 0.125rem)) / 2)
--pf-c-switch__toggle--before--Left --pf-c-switch__toggle--before--Top calc((--pf-c-switch__toggle--Height - --pf-c-switch__toggle--before--Height) / 2) calc((calc(--pf-c-switch--FontSize * --pf-c-switch--LineHeight) - --pf-c-switch__toggle--before--Width) / 2) calc((calc(--pf-global--FontSize--md * --pf-global--LineHeight--md) - calc(--pf-c-switch--FontSize - --pf-c-switch__toggle-icon--Offset)) / 2) calc((calc($pf-global--FontSize--md * $pf-global--LineHeight--md) - calc(--pf-global--FontSize--md - 0.125rem)) / 2) calc((calc($pf-global--FontSize--md * $pf-global--LineHeight--md) - calc($pf-global--FontSize--md - 0.125rem)) / 2) calc((calc(pf-font-prem(16px) * 1.5) - calc(pf-font-prem(16px) - 0.125rem)) / 2) calc((calc(1rem * 1.5) - calc(1rem - 0.125rem)) / 2)
	.pf-c-switch	--pf-c-switch__toggle--before--BackgroundColor	#fff
--pf-c-switch__toggle--before--BackgroundColor --pf-global--BackgroundColor--100 $pf-global--BackgroundColor--100 $pf-color-white #fff
	.pf-c-switch	--pf-c-switch__toggle--before--BorderRadius	30em
--pf-c-switch__toggle--before--BorderRadius --pf-global--BorderRadius--lg $pf-global--BorderRadius--lg 30em
	.pf-c-switch	--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--BoxShadow --pf-global--BoxShadow--md $pf-global--BoxShadow--md 0 pf-size-prem(4px) pf-size-prem(8px) pf-size-prem(0) rgba($pf-color-black-1000, .12), 0 0 pf-size-prem(4px) 0 rgba($pf-color-black-1000, .06) 0 pf-size-prem(4px) pf-size-prem(8px) pf-size-prem(0) rgba(#030303, .12), 0 0 pf-size-prem(4px) 0 rgba(#030303, .06) 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	--pf-c-switch__toggle--before--Transition	transform .25s ease 0s
	.pf-c-switch	--pf-c-switch__toggle--Width	calc(calc(1rem * 1.5) + 0.125rem + calc(1rem - 0.125rem))
--pf-c-switch__toggle--Width calc(--pf-c-switch__toggle--Height + --pf-c-switch__toggle-icon--Offset + --pf-c-switch__toggle--before--Width) calc(calc(--pf-c-switch--FontSize * --pf-c-switch--LineHeight) + 0.125rem + calc(--pf-c-switch--FontSize - --pf-c-switch__toggle-icon--Offset)) calc(calc(--pf-global--FontSize--md * --pf-global--LineHeight--md) + 0.125rem + calc(--pf-global--FontSize--md - 0.125rem)) calc(calc($pf-global--FontSize--md * $pf-global--LineHeight--md) + 0.125rem + calc($pf-global--FontSize--md - 0.125rem)) calc(calc(pf-font-prem(16px) * 1.5) + 0.125rem + calc(pf-font-prem(16px) - 0.125rem)) calc(calc(1rem * 1.5) + 0.125rem + calc(1rem - 0.125rem))
	.pf-c-switch	--pf-c-switch__label--Color	#151515
--pf-c-switch__label--Color --pf-global--Color--dark-100 $pf-global--Color--dark-100 $pf-color-black-900 #151515

View source on GitHub

QUICKLINKS

CONTRIBUTE

STAY IN TOUCH

Privacy statement Terms of use All policies and guidelines