Switch

A switch turns a setting on or off, and the change applies at once, with nothing to confirm. Where 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, 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#

<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 toggles it, and Enter does too, which is what people expect from a setting that applies at once.

It carries no label of its own: wrap it in a <label> or pass aria-label. Write that name for the setting, Auto refresh, not for the current state. The optional icons on the handle are decoration, and a screen reader never reads them.

API#

Switch#

Attributes#

Bindables#