/ switch

Switch

@kumiki/components/switch

Compound <Switch.Root> for an on/off setting (role="switch", aria-checked).

Pure state machines (FSMs). No DOM. Run in server, Vitest, Worker. Reach for these when you only want the behavior.

State machine

On/off switch (aria-checked).

Source package: @kumiki/machines/switch
Initial state: off
Top-level states: off,on,disabled

toJSON() snapshot Open in stately.ai/viz

Install

pnpm add @kumiki/machines

Pure-TS usage — no DOM, no Svelte

import { createSwitchMachine } from '@kumiki/machines/switch';

const m = createSwitchMachine({ initial: false });
console.log(m.state);              // 'off'
m.send({ type: 'TOGGLE' });
console.log(m.state);              // 'on'
console.log(m.context.checked);    // true

Svelte 5 {@attach} factories. Glue ARIA / keyboard / focus onto any DOM node you choose. **Best when you want full control over markup and styling.**

Install

pnpm add @kumiki/headless

Drive a vanilla button

<script lang="ts">
  import { createSwitch } from '@kumiki/headless/switch';
  const s = createSwitch({ initial: false });
</script>

<button {@attach s.root}>{s.checked ? 'On' : 'Off'}</button>

Compound components (<Root> / <Trigger> / …). Markup is fixed; styling is not. Same trade-off as a typical headless UI library.

Live preview

Install

pnpm add @kumiki/components/switch

Basic — uncontrolled

<script lang="ts">
  import { Switch } from '@kumiki/components/switch';
  let checked = $state(false);
</script>

<Switch.Root bind:checked>
  {checked ? 'On' : 'Off'}
</Switch.Root>

With onCheckedChange — server sync

<Switch.Root
  onCheckedChange={(c) =>
    fetch('/api/dark-mode', {
      method: 'POST',
      body: JSON.stringify({ on: c }),
    })}>
  Dark mode
</Switch.Root>

Disabled

<Switch.Root disabled>Off</Switch.Root>

Styled, copy-paste presets (preview). Run pnpm kumiki add to drop the source into your project, then edit freely.

Live preview

Live preview…

Install

pnpm add @kumiki/atelier

Track + thumb Switch

<script lang="ts">
  import { Tailwind as Switch } from '@kumiki/atelier/switch';
  let notify = $state<boolean | undefined>(true);
</script>

<label>
  <Switch.Root bind:checked={notify} aria-label="Notifications" />
  <span>Email notifications</span>
</label>

Key	Effect
`Space, Enter`	Toggles checked state.
`Tab`	Move focus.

This component, layer by layer

Keyboard

Test discipline