Switch

A switch turns a setting on or off. The change applies at once. When a choice only takes effect once a form is submitted, use a checkbox instead.

Usage#

<script lang="ts">
	import { Switch } from 'noph-ui'
</script>

<Switch />

Disable#

<script lang="ts">
	import { Switch } from 'noph-ui'
</script>

<Switch disabled />

Icons#

<script lang="ts">
	import { Switch } from 'noph-ui'
</script>

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

Theming#

Tokens#

--np-switch-selected-icon-color colors the icon inside the handle. The icon only shows with icons="selected" or icons="both". The disabled tokens set a color and an opacity separately: the disabled switch fades the normal colors. The hover and pressed handle colors fall back to the plain handle color, so a themed handle keeps its color. M3 also shows primary-container on a selected handle in these states. That only reads well when primary-container is far from primary, as in the baseline palette. So the selected handle keeps its normal color unless you set --np-switch-selected-hover-handle-color. The state layer around the handle takes the selected track color while the switch is on and --np-color-on-surface while it is off.

Example#

<script lang="ts">
	import { Switch } from 'noph-ui'
</script>

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

Accessibility#

The switch is a native checkbox reporting role="switch", so it is announced as on or off rather than checked. Space and Enter toggle it. Both fire input and change, like a click. The touch target is 48dp tall, a little taller than the switch.

It has no label of its own: wrap it in a <label> or pass aria-label. Name the setting, for example Auto refresh, not the current state. The optional icons on the handle are decoration, and screen readers do not read them.

API#

Switch#

Attributes#

Bindables#