Switch

A switch is a control that toggles the state of a setting between on and off.

CSS variables

Expand or collapse column	Selector	Variable	Value
	.pf-v6-c-switch	--pf-v6-c-switch--FontSize	0.875rem
--pf-v6-c-switch--FontSize --pf-t--global--font--size--sm --pf-t--global--font--size--200 0.875rem
	.pf-v6-c-switch	--pf-v6-c-switch--ColumnGap	0.5rem
--pf-v6-c-switch--ColumnGap --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-switch	--pf-v6-c-switch__toggle-icon--FontSize	calc(0.875rem * .625)
--pf-v6-c-switch__toggle-icon--FontSize calc(--pf-v6-c-switch--FontSize * .625) calc(--pf-t--global--font--size--sm * .625) calc(--pf-t--global--font--size--200 * .625) calc(0.875rem * .625)
	.pf-v6-c-switch	--pf-v6-c-switch__toggle-icon--Color	(In light theme) #ffffff
--pf-v6-c-switch__toggle-icon--Color --pf-t--global--icon--color--on-brand--default --pf-t--global--icon--color--inverse --pf-t--global--icon--color--300 --pf-t--color--white #ffffff
	.pf-v6-c-switch	--pf-v6-c-switch__toggle-icon--InsetInlineStart	calc(0.875rem * .4)
--pf-v6-c-switch__toggle-icon--InsetInlineStart calc(--pf-v6-c-switch--FontSize * .4) calc(--pf-t--global--font--size--sm * .4) calc(--pf-t--global--font--size--200 * .4) calc(0.875rem * .4)
	.pf-v6-c-switch	--pf-v6-c-switch__toggle-icon--Offset	0.125rem
	.pf-v6-c-switch	--pf-v6-c-switch__input--disabled__toggle-icon--Color	(In light theme) #a3a3a3
--pf-v6-c-switch__input--disabled__toggle-icon--Color --pf-t--global--icon--color--disabled --pf-t--global--color--disabled--200 --pf-t--color--gray--40 #a3a3a3
	.pf-v6-c-switch	--pf-v6-c-switch--LineHeight	1.5
--pf-v6-c-switch--LineHeight --pf-t--global--font--line-height--body --pf-t--global--font--line-height--200 1.5
	.pf-v6-c-switch	--pf-v6-c-switch--Height	auto
	.pf-v6-c-switch	--pf-v6-c-switch__input--checked__toggle--BackgroundColor	(In light theme) #0066cc
--pf-v6-c-switch__input--checked__toggle--BackgroundColor --pf-t--global--color--brand--default --pf-t--global--color--brand--200 --pf-t--color--blue--50 #0066cc
	.pf-v6-c-switch	--pf-v6-c-switch__input--checked__toggle--before--TranslateX	calc(100% + 0.125rem)
--pf-v6-c-switch__input--checked__toggle--before--TranslateX calc(100% + --pf-v6-c-switch__toggle-icon--Offset) calc(100% + 0.125rem)
	.pf-v6-c-switch	--pf-v6-c-switch__input--checked__toggle--BorderColor	transparent
	.pf-v6-c-switch	--pf-v6-c-switch__input--checked__toggle--BorderWidth	0px
--pf-v6-c-switch__input--checked__toggle--BorderWidth --pf-t--global--border--width--high-contrast--regular 0px
	.pf-v6-c-switch	--pf-v6-c-switch__input--checked__label--Color	(In light theme) #151515
--pf-v6-c-switch__input--checked__label--Color --pf-t--global--text--color--regular --pf-t--global--text--color--100 --pf-t--color--gray--95 #151515
	.pf-v6-c-switch	--pf-v6-c-switch__input--not-checked__label--Color	(In light theme) #4d4d4d
--pf-v6-c-switch__input--not-checked__label--Color --pf-t--global--text--color--subtle --pf-t--global--text--color--200 --pf-t--color--gray--60 #4d4d4d
	.pf-v6-c-switch	--pf-v6-c-switch__input--disabled__label--Color	(In light theme) #a3a3a3
--pf-v6-c-switch__input--disabled__label--Color --pf-t--global--text--color--disabled --pf-t--global--color--disabled--200 --pf-t--color--gray--40 #a3a3a3
	.pf-v6-c-switch	--pf-v6-c-switch__input--disabled__toggle--BackgroundColor	(In light theme) #c7c7c7
--pf-v6-c-switch__input--disabled__toggle--BackgroundColor --pf-t--global--background--color--disabled--default --pf-t--global--color--disabled--100 --pf-t--color--gray--30 #c7c7c7
	.pf-v6-c-switch	--pf-v6-c-switch__input--disabled__toggle--BorderColor	(In light theme) rgb(255, 255, 255, 0.0000)
--pf-v6-c-switch__input--disabled__toggle--BorderColor --pf-t--global--border--color--high-contrast rgb(255, 255, 255, 0.0000)
	.pf-v6-c-switch	--pf-v6-c-switch__input--checked__toggle--before--BackgroundColor	(In light theme) #ffffff
--pf-v6-c-switch__input--checked__toggle--before--BackgroundColor --pf-t--global--icon--color--inverse --pf-t--global--icon--color--300 --pf-t--color--white #ffffff
	.pf-v6-c-switch	--pf-v6-c-switch__input--not-checked__toggle--before--BackgroundColor	(In light theme) #707070
--pf-v6-c-switch__input--not-checked__toggle--before--BackgroundColor --pf-t--global--icon--color--subtle --pf-t--global--icon--color--200 --pf-t--color--gray--50 #707070
	.pf-v6-c-switch	--pf-v6-c-switch__input--disabled__toggle--before--BackgroundColor	(In light theme) #707070
--pf-v6-c-switch__input--disabled__toggle--before--BackgroundColor --pf-t--global--icon--color--on-disabled --pf-t--global--color--disabled--300 --pf-t--color--gray--50 #707070
	.pf-v6-c-switch	--pf-v6-c-switch__input--focus__toggle--OutlineWidth	2px
--pf-v6-c-switch__input--focus__toggle--OutlineWidth --pf-t--global--border--width--strong --pf-t--global--border--width--200 2px
	.pf-v6-c-switch	--pf-v6-c-switch__input--focus__toggle--OutlineOffset	0.25rem
--pf-v6-c-switch__input--focus__toggle--OutlineOffset --pf-t--global--spacer--xs --pf-t--global--spacer--100 0.25rem
	.pf-v6-c-switch	--pf-v6-c-switch__input--focus__toggle--OutlineColor	(In light theme) #0066cc
--pf-v6-c-switch__input--focus__toggle--OutlineColor --pf-t--global--color--brand--default --pf-t--global--color--brand--200 --pf-t--color--blue--50 #0066cc
	.pf-v6-c-switch	--pf-v6-c-switch__toggle--Height	calc(0.875rem * 1.5)
--pf-v6-c-switch__toggle--Height calc(--pf-v6-c-switch--FontSize * --pf-v6-c-switch--LineHeight) calc(--pf-t--global--font--size--sm * --pf-t--global--font--line-height--body) calc(--pf-t--global--font--size--200 * --pf-t--global--font--line-height--200) calc(0.875rem * 1.5)
	.pf-v6-c-switch	--pf-v6-c-switch__toggle--BackgroundColor	(In light theme) #ffffff
--pf-v6-c-switch__toggle--BackgroundColor --pf-t--global--background--color--control--default --pf-t--global--background--color--primary--default --pf-t--global--background--color--100 --pf-t--color--white #ffffff
	.pf-v6-c-switch	--pf-v6-c-switch__toggle--BorderColor	(In light theme) #8c8c8c
--pf-v6-c-switch__toggle--BorderColor --pf-t--global--border--color--control--default --pf-t--global--border--color--300 --pf-t--color--gray--45 #8c8c8c
	.pf-v6-c-switch	--pf-v6-c-switch__toggle--BorderWidth	1px
--pf-v6-c-switch__toggle--BorderWidth --pf-t--global--border--width--control--default --pf-t--global--border--width--100 1px
	.pf-v6-c-switch	--pf-v6-c-switch__toggle--BorderRadius	999px
--pf-v6-c-switch__toggle--BorderRadius --pf-t--global--border--radius--pill --pf-t--global--border--radius--500 999px
	.pf-v6-c-switch	--pf-v6-c-switch__toggle--before--Width	calc(0.875rem - 0.125rem)
--pf-v6-c-switch__toggle--before--Width calc(--pf-v6-c-switch--FontSize - --pf-v6-c-switch__toggle-icon--Offset) calc(--pf-t--global--font--size--sm - 0.125rem) calc(--pf-t--global--font--size--200 - 0.125rem) calc(0.875rem - 0.125rem)
	.pf-v6-c-switch	--pf-v6-c-switch__toggle--before--Height	calc(0.875rem - 0.125rem)
--pf-v6-c-switch__toggle--before--Height --pf-v6-c-switch__toggle--before--Width calc(--pf-v6-c-switch--FontSize - --pf-v6-c-switch__toggle-icon--Offset) calc(--pf-t--global--font--size--sm - 0.125rem) calc(--pf-t--global--font--size--200 - 0.125rem) calc(0.875rem - 0.125rem)
	.pf-v6-c-switch	--pf-v6-c-switch__toggle--before--InsetInlineStart	calc((calc(0.875rem * 1.5) - calc(0.875rem - 0.125rem)) / 2)
--pf-v6-c-switch__toggle--before--InsetInlineStart calc((--pf-v6-c-switch__toggle--Height - --pf-v6-c-switch__toggle--before--Height) / 2) calc((calc(--pf-v6-c-switch--FontSize * --pf-v6-c-switch--LineHeight) - --pf-v6-c-switch__toggle--before--Width) / 2) calc((calc(--pf-t--global--font--size--sm * --pf-t--global--font--line-height--body) - calc(--pf-v6-c-switch--FontSize - --pf-v6-c-switch__toggle-icon--Offset)) / 2) calc((calc(--pf-t--global--font--size--200 * --pf-t--global--font--line-height--200) - calc(--pf-t--global--font--size--sm - 0.125rem)) / 2) calc((calc(0.875rem * 1.5) - calc(--pf-t--global--font--size--200 - 0.125rem)) / 2) calc((calc(0.875rem * 1.5) - calc(0.875rem - 0.125rem)) / 2)
	.pf-v6-c-switch	--pf-v6-c-switch__toggle--before--BorderWidth	0px
--pf-v6-c-switch__toggle--before--BorderWidth --pf-t--global--border--width--high-contrast--regular 0px
	.pf-v6-c-switch	--pf-v6-c-switch__toggle--before--BorderRadius	24px
--pf-v6-c-switch__toggle--before--BorderRadius --pf-t--global--border--radius--large --pf-t--global--border--radius--400 24px
	.pf-v6-c-switch	--pf-v6-c-switch__toggle--before--TransitionTimingFunction	cubic-bezier(.4, 0, .2, 1)
--pf-v6-c-switch__toggle--before--TransitionTimingFunction --pf-t--global--motion--timing-function--default --pf-t--global--timing-function--200 cubic-bezier(.4, 0, .2, 1)
	.pf-v6-c-switch	--pf-v6-c-switch__toggle--before--TransitionDuration	200ms
--pf-v6-c-switch__toggle--before--TransitionDuration --pf-t--global--motion--duration--md --pf-t--global--duration--200 200ms
	.pf-v6-c-switch	--pf-v6-c-switch__toggle--before--Transition	transform cubic-bezier(.4, 0, .2, 1) 200ms, background-color cubic-bezier(.4, 0, .2, 1) 200ms
--pf-v6-c-switch__toggle--before--Transition transform --pf-v6-c-switch__toggle--before--TransitionTimingFunction --pf-v6-c-switch__toggle--before--TransitionDuration, background-color --pf-v6-c-switch__toggle--before--TransitionTimingFunction --pf-v6-c-switch__toggle--before--TransitionDuration transform --pf-t--global--motion--timing-function--default --pf-t--global--motion--duration--md, background-color --pf-t--global--motion--timing-function--default --pf-t--global--motion--duration--md transform --pf-t--global--timing-function--200 --pf-t--global--duration--200, background-color --pf-t--global--timing-function--200 --pf-t--global--duration--200 transform cubic-bezier(.4, 0, .2, 1) 200ms, background-color cubic-bezier(.4, 0, .2, 1) 200ms
	.pf-v6-c-switch	--pf-v6-c-switch__toggle--Width	calc(calc(0.875rem * 1.5) + 0.125rem + calc(0.875rem - 0.125rem))
--pf-v6-c-switch__toggle--Width calc(--pf-v6-c-switch__toggle--Height + --pf-v6-c-switch__toggle-icon--Offset + --pf-v6-c-switch__toggle--before--Width) calc(calc(--pf-v6-c-switch--FontSize * --pf-v6-c-switch--LineHeight) + 0.125rem + calc(--pf-v6-c-switch--FontSize - --pf-v6-c-switch__toggle-icon--Offset)) calc(calc(--pf-t--global--font--size--sm * --pf-t--global--font--line-height--body) + 0.125rem + calc(--pf-t--global--font--size--sm - 0.125rem)) calc(calc(--pf-t--global--font--size--200 * --pf-t--global--font--line-height--200) + 0.125rem + calc(--pf-t--global--font--size--200 - 0.125rem)) calc(calc(0.875rem * 1.5) + 0.125rem + calc(0.875rem - 0.125rem))
	.pf-v6-c-switch__input:checked ~ .pf-v6-c-switch__toggle	--pf-v6-c-switch__toggle--BorderWidth	0px
--pf-v6-c-switch__toggle--BorderWidth --pf-v6-c-switch__input--checked__toggle--BorderWidth --pf-t--global--border--width--high-contrast--regular 0px
	.pf-v6-c-switch__input:checked ~ .pf-v6-c-switch__toggle	--pf-v6-c-switch__toggle--BorderColor	transparent
--pf-v6-c-switch__toggle--BorderColor --pf-v6-c-switch__input--checked__toggle--BorderColor transparent
	.pf-v6-c-switch__input:disabled ~ .pf-v6-c-switch__toggle	--pf-v6-c-switch__toggle-icon--Color	(In light theme) #a3a3a3
--pf-v6-c-switch__toggle-icon--Color --pf-v6-c-switch__input--disabled__toggle-icon--Color --pf-t--global--icon--color--disabled --pf-t--global--color--disabled--200 --pf-t--color--gray--40 #a3a3a3
	.pf-v6-c-switch__input:disabled ~ .pf-v6-c-switch__toggle	--pf-v6-c-switch__toggle--BorderColor	(In light theme) rgb(255, 255, 255, 0.0000)
--pf-v6-c-switch__toggle--BorderColor --pf-v6-c-switch__input--disabled__toggle--BorderColor --pf-t--global--border--color--high-contrast rgb(255, 255, 255, 0.0000)