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" />

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.