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

Size

Use size="small" for dense tool panels and size="medium" (the default) for the standard Material proportions. At default typography and density 0, track heights are 24dp and 32dp respectively. Set switchSize in M3VuePlugin options for an application default; an explicit component prop takes precedence.

app.use(M3VuePlugin, { switchSize: 'small' });

The global default also accepts a Vue ref for reactive updates.

SmallMedium

In presentation mode only the track occupies layout space. The owning row supplies interaction and hover feedback; --md-switch-target-size does not add space to presentation controls.

Density

Default geometry follows the body-medium font size. The dimensions below describe default typography; compact and custom typography scale the baseline and its bounds before applying density. Explicit geometry tokens bypass this calculation.

The medium track height starts at 32dp and changes by 1dp per density step, clamped to 28–36dp. Small starts at 24dp, clamped to 20–28dp. Track width, handle sizes, travel insets, outlines and internal icons scale proportionally. Explicit component tokens override individual dimensions; setting track height also establishes the default proportions.

The interaction and hover target starts at 40dp for medium and 32dp for small, and changes by 2dp per step, retaining at least 4dp above and below the track. Icon scale and source calibration do not affect Switch geometry.

density 0density -2density -4

Examples

Default

Airplane mode

Checked: false

With Icon

check Airplane mode

States

UncheckedcheckCheckedDisabled uncheckedcheckDisabled checked

Reference

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
sizeOptional	Track size; inherits the configured default. SwitchSize | undefined	-	-
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.

Styling46

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 FallbackResolved track height × 28 / 32	Controls pressed handle height.
--md-switch-pressed-handle-widthState FallbackResolved track height × 28 / 32	Controls pressed handle width.
--md-switch-selected-handle-colorState Fallbackvar(--md-sys-color-on-primary)	Controls selected handle color.
--md-switch-selected-handle-heightState FallbackResolved track height × 24 / 32	Controls selected handle height.
--md-switch-selected-handle-widthState FallbackResolved track height × 24 / 32	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 FallbackResolved track height × 16 / 32	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-target-sizeLayout FallbackSize baseline + 2dp per density step; at least track height + 8dp; presentation uses track height	Controls the minimum interaction target height.
--md-switch-track-heightLayout FallbackSize, typography and density (small: 24dp; medium: 32dp at default typography and density 0)	Controls track height.
--md-switch-track-outline-widthLayout FallbackResolved track height / 16	Controls track outline width.
--md-switch-track-shapeShape Fallbackvar(--md-sys-shape-corner-full)	Controls track shape.
--md-switch-track-widthLayout FallbackResolved track height × 52 / 32	Controls track width.
--md-switch-unselected-handle-colorState Fallbackvar(--md-sys-color-outline)	Controls unselected handle color.
--md-switch-unselected-handle-heightState FallbackResolved track height × 16 / 32	Controls unselected handle height.
--md-switch-unselected-handle-widthState FallbackResolved track height × 16 / 32	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 FallbackResolved track height × 16 / 32	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 FallbackResolved track height × 24 / 32	Controls with icon handle height.
--md-switch-with-icon-handle-widthLayout FallbackResolved track height × 24 / 32	Controls with icon handle width.