Switch

Switches communicate an immediate on or off state and support optional checked and unchecked icon affordances. Use presentation when the switch is only a visual indicator inside another accessible control, such as a clickable ListItem.

Airplane mode

Checked: false

Anatomy

Highlight

Element	Part	Selector
<component>	root	[data-scope="switch"][data-part="root"] left_clickLMBCopy
<input>	inputconditional	[data-scope="switch"][data-part="input"] left_clickLMBCopy
<span>	control	[data-scope="switch"][data-part="control"] left_clickLMBCopy
<span>	handle	[data-scope="switch"][data-part="handle"] left_clickLMBCopy
<span>	iconconditional	[data-scope="switch"][data-part="icon"] left_clickLMBCopy
<span>	labelconditional	[data-scope="switch"][data-part="label"] left_clickLMBCopy

Props

Name	Description	Default	Control
disabledOptional	Whether the switch is disabled. boolean | undefined	false
presentationOptional	Render only the visual switch. The parent must provide interaction semantics. boolean | undefined	false
checkedIconOptional	Icon name displayed when checked. string | undefined	"check"
uncheckedIconOptional	Icon name displayed when unchecked. string | undefined	-
nameOptional	Name attribute for the native checkbox input. string | undefined	-	-
valueOptional	Value attribute for the native checkbox input. string | undefined	-	-
ariaLabelOptional	ARIA label forwarded to the native checkbox input. string | undefined	-	-
checkedRequired	- boolean	-

Events1

Name	Type	Description
update:checked	[value: boolean]	-

Slots1

Name	Parameters	Description
default	-	Optional label content rendered next to switch.

Styling45

Preview

Token	Description
--md-switch-disabled-selected-handle-colorDisabled Fallbackvar(--md-sys-color-surface)	Controls disabled selected handle color.
--md-switch-disabled-selected-handle-opacityDisabled Fallback1	Controls disabled selected handle opacity.
--md-switch-disabled-selected-icon-colorDisabled Fallbackvar(--md-sys-color-on-surface)	Controls disabled selected icon color.
--md-switch-disabled-selected-icon-opacityDisabled Fallback0.38	Controls disabled selected icon opacity.
--md-switch-disabled-selected-track-colorDisabled Fallbackvar(--md-sys-color-on-surface)	Controls disabled selected track color.
--md-switch-disabled-track-opacityDisabled Fallback0.12	Controls disabled track opacity.
--md-switch-disabled-unselected-handle-colorDisabled Fallbackvar(--md-sys-color-on-surface)	Controls disabled unselected handle color.
--md-switch-disabled-unselected-handle-opacityDisabled Fallback0.38	Controls disabled unselected handle opacity.
--md-switch-disabled-unselected-icon-colorDisabled Fallbackvar(--md-sys-color-surface-container-highest)	Controls disabled unselected icon color.
--md-switch-disabled-unselected-icon-opacityDisabled Fallback0.38	Controls disabled unselected icon opacity.
--md-switch-disabled-unselected-track-colorDisabled Fallbackvar(--md-sys-color-surface-container-highest)	Controls disabled unselected track color.
--md-switch-disabled-unselected-track-outline-colorDisabled Fallbackvar(--md-sys-color-on-surface)	Controls disabled unselected track outline color.
--md-switch-focus-indicator-colorFocus Fallbackvar(--md-sys-color-secondary)	Controls focus indicator color.
--md-switch-focus-indicator-offsetFocus Fallbackvar(--md-sys-state-focus-indicator-outer-offset)	Controls focus indicator offset.
--md-switch-focus-indicator-thicknessFocus Fallbackvar(--md-sys-state-focus-indicator-thickness)	Controls focus indicator thickness.
--md-switch-handle-shapeShape Fallbackvar(--md-sys-shape-corner-full)	Controls handle shape.
--md-switch-pressed-handle-heightState Fallback1.75rem	Controls pressed handle height.
--md-switch-pressed-handle-widthState Fallback1.75rem	Controls pressed handle width.
--md-switch-selected-handle-colorState Fallbackvar(--md-sys-color-on-primary)	Controls selected handle color.
--md-switch-selected-handle-heightState Fallback1.5rem	Controls selected handle height.
--md-switch-selected-handle-widthState Fallback1.5rem	Controls selected handle width.
--md-switch-selected-hover-handle-colorState Fallbackvar(--md-sys-color-primary-container)	Controls selected hover handle color.
--md-switch-selected-hover-track-colorState Fallbackvar(--md-sys-color-primary)	Controls selected hover track color.
--md-switch-selected-icon-colorState Fallbackvar(--md-sys-color-primary)	Controls selected icon color.
--md-switch-selected-icon-sizeState Fallback1rem	Controls selected icon size.
--md-switch-selected-pressed-handle-colorState Fallbackvar(--md-sys-color-primary-container)	Controls selected pressed handle color.
--md-switch-selected-pressed-track-colorState Fallbackvar(--md-sys-color-primary)	Controls selected pressed track color.
--md-switch-selected-track-colorState Fallbackvar(--md-sys-color-primary)	Controls selected track color.
--md-switch-track-heightLayout Fallback2rem	Controls track height.
--md-switch-track-outline-widthLayout Fallback0.125rem	Controls track outline width.
--md-switch-track-shapeShape Fallbackvar(--md-sys-shape-corner-full)	Controls track shape.
--md-switch-track-widthLayout Fallback3.25rem	Controls track width.
--md-switch-unselected-handle-colorState Fallbackvar(--md-sys-color-outline)	Controls unselected handle color.
--md-switch-unselected-handle-heightState Fallback1rem	Controls unselected handle height.
--md-switch-unselected-handle-widthState Fallback1rem	Controls unselected handle width.
--md-switch-unselected-hover-handle-colorState Fallbackvar(--md-sys-color-on-surface-variant)	Controls unselected hover handle color.
--md-switch-unselected-hover-track-colorState Fallbackvar(--md-sys-color-surface-container-highest)	Controls unselected hover track color.
--md-switch-unselected-icon-colorState Fallbackvar(--md-sys-color-surface-container-highest)	Controls unselected icon color.
--md-switch-unselected-icon-sizeState Fallback1rem	Controls unselected icon size.
--md-switch-unselected-pressed-handle-colorState Fallbackvar(--md-sys-color-on-surface-variant)	Controls unselected pressed handle color.
--md-switch-unselected-pressed-track-colorState Fallbackvar(--md-sys-color-surface-container-highest)	Controls unselected pressed track color.
--md-switch-unselected-track-colorState Fallbackvar(--md-sys-color-surface-container-highest)	Controls unselected track color.
--md-switch-unselected-track-outline-colorState Fallbackvar(--md-sys-color-outline)	Controls unselected track outline color.
--md-switch-with-icon-handle-heightLayout Fallback1.5rem	Controls with icon handle height.
--md-switch-with-icon-handle-widthLayout Fallback1.5rem	Controls with icon handle width.

Examples

Default

Airplane mode

Checked: false

With Icon

check Airplane mode

States

UncheckedcheckCheckedDisabled uncheckedcheckDisabled checked