Switch

Accessible on/off toggle.

A binary toggle built on a native `<button role="switch">`, so Space and Enter activate it for free. Bindable `checked`, an optional adjacent `label` (clicking it toggles too) that becomes the accessible name, and `disabled` for inert state. Square track and square thumb (house rule — no rounded pill); the track fills with the brand colour when on, transitions respect reduced-motion.

Demo

live · storybook Open in Storybook

Demo loads from https://dssoca-storybook.vercel.app/. Run pnpm storybook for it to render locally.

Usage

svelte

<script>
  import { Switch } from 'dssoca';
  let enabled = $state(false);
</script>

<Switch bind:checked={enabled} label="Notifications" />
<Switch checked disabled label="Locked on" />

HTML

interactive with vanilla.js The exact markup the component renders, generated at build time. Use it with dssoca/vanilla.css+ dssoca/vanilla.js — see Plain HTML & CSS.

html

<span class="ss-switch has-label">
  <button id="wifi" type="button" role="switch" class="track" aria-checked="false" aria-labelledby="wifi-label">
    <span class="thumb" aria-hidden="true"></span>
  </button>
  <span id="wifi-label" class="label" role="presentation">Wi-Fi</span>
</span>

vanilla.js toggles aria-checked / .on from the track or the label and emits ss:change.

Props

Prop	Type	Default	Description
`checked`	`boolean`	`false`	On/off state (bindable).
`label`	`string`	—	Visible label rendered adjacent to the track; becomes the accessible name.
`labelHidden`	`boolean`	`false`	Visually hide the label while keeping it as the accessible name — for dense rows (settings lists) where the visible context sits elsewhere.
`id`	`string`	—	Id for the underlying button.
`name`	`string`	—	Form field name (mirrored onto a data attribute).
`disabled`	`boolean`	`false`	Disable: inert + non-toggling.
`describedby`	`string`	—	Id of an element that further describes the switch (→ aria-describedby).
`onchange`	`(checked: boolean) => void`	—	Fired after `checked` flips, with the new value.
`size`	`'sm' \| 'md' \| 'lg'`	—	Per-instance size override; inherits the ancestor `data-size-variant` when unset.