Switch

Usage

<Switch />

Disable

<Switch disabled />

Icons

<Switch icons="selected" />
<Switch icons="both" />

Theming

Tokens

Token	Default value
`--np-comp-switch-selected-track-color`	`--np-color-primary`
`--np-comp-switch-selected-handle-color`	`--np-color-on-primary`
`--np-comp-switch-selected-icon-color`	`--np-color-primary`
`--np-comp-switch-unselected-track-color`	`--np-color-surface-container-highest`
`--np-comp-switch-unselected-track-outline-color`	`--np-color-outline`
`--np-comp-switch-unselected-handle-color`	`--np-color-outline`
`--np-comp-switch-handle-shape`	`--np-shape-corner-full`
`--np-comp-switch-state-layer-shape`	`--np-shape-corner-full`
`--np-comp-switch-state-layer-size`	`2.5rem`
`--np-comp-switch-disabled-unselected-track-color`	`--np-color-surface-container-highest`
`--np-comp-switch-disabled-selected-track-color`	`--np-color-on-surface`
`--np-comp-switch-disabled-track-opacity`	`0.12`
`--np-comp-switch-disabled-unselected-handle-opacity`	`0.38`
`--np-comp-switch-disabled-selected-handle-opacity`	`1`

--np-comp-switch-selected-icon-color colors the icon inside the handle, which only shows with icons="selected" or icons="both". The disabled tokens take a colour and an opacity separately, because the disabled switch is drawn by fading the same colours rather than by swapping in pre-faded ones.

Example

<Switch
	selected
	icons="both"
	--np-comp-switch-selected-track-color="var(--np-color-tertiary)"
	--np-comp-switch-selected-handle-color="var(--np-color-on-tertiary)"
	--np-comp-switch-selected-icon-color="var(--np-color-tertiary)"
/>

API

Switch

Attributes

Attribute	Type	Description
`disabled`	`boolean`	Disables the switch.
`icons`	`'selected' \| 'both' \| undefined`	Controls the visibility of icons. Determines if only one icon is shown when selected, if both are shown (which also increases the size of the indicator when unchecked) or none for never showing an icon.

Bindables

Attribute	Type	Description
`selected`	`boolean`	The state of the switch. True indicates the switch is on.
`element`	`HTMLDivElement`	A reference to the root DOM element of the component. This variable is bound using `bind:this`, allowing direct access to the underlying HTML element for manipulation or querying within the component's logic.
`inputElement`	`HTMLInputElement \| undefined`	Allows access to the underlying native checkbox input element.