/ toggle

Toggle

@kumiki/headless/toggle

Svelte 5 attachment for Toggle. Drives ARIA + data-state directly on a DOM node.

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

State machine

aria-pressed two-state toggle.

Source package: @kumiki/machines/toggle
Initial state: unpressed
Top-level states: unpressed,pressed,disabled

toJSON() snapshot Open in stately.ai/viz

Install

pnpm add @kumiki/machines

Pure-TS usage — no DOM, no Svelte

import { createToggleMachine } from '@kumiki/machines/toggle';

const m = createToggleMachine({ initial: false });
console.log(m.state);              // 'unpressed'
m.send({ type: 'TOGGLE' });
console.log(m.state);              // 'pressed'
console.log(m.context.toggles);    // 1

Visualize the statechart

import { createToggleMachine } from '@kumiki/machines/toggle';

// Drop the JSON into https://stately.ai/viz to see the statechart.
console.log(JSON.stringify(createToggleMachine().toJSON(), null, 2));

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

Live preview

Install

pnpm add @kumiki/headless

Drive a vanilla button

<script lang="ts">
  import { createToggle } from '@kumiki/headless/toggle';
  const t = createToggle({ initial: false });
</script>

<button {@attach t.root}>
  {t.pressed ? 'On' : 'Off'}
</button>

Subscribe + react in Svelte

<script lang="ts">
  import { createToggle } from '@kumiki/headless/toggle';

  const t = createToggle({ initial: false });
  let pressed = $state(t.pressed);
  t.subscribe(({ context }) => (pressed = context.pressed));
</script>

<button {@attach t.root}>{pressed ? '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/toggle

Basic — uncontrolled

<script lang="ts">
  import { Toggle } from '@kumiki/components/toggle';
  let pressed = $state(false);
</script>

<Toggle.Root bind:pressed>
  {pressed ? 'On' : 'Off'}
</Toggle.Root>

With onPressedChange

<script lang="ts">
  import { Toggle } from '@kumiki/components/toggle';
</script>

<Toggle.Root onPressedChange={(p) => console.log('changed:', p)}>
  Bold
</Toggle.Root>

Render delegation via child snippet

<Toggle.Root>
  {#snippet child({ props, state })}
    <button {...props} class="my-styled-toggle" data-state={state.pressed ? 'on' : 'off'}>
      {state.pressed ? '🌙' : '☀️'}
    </button>
  {/snippet}
</Toggle.Root>

Disabled

<Toggle.Root disabled>Off</Toggle.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

Drop-in styled Toggle (Tailwind v4)

<script lang="ts">
  import { Tailwind as Toggle } from '@kumiki/atelier/toggle';
  let bold = $state(false);
</script>

<Toggle.Root bind:pressed={bold} variant="outline" size="md">
  Bold
</Toggle.Root>

Vanilla CSS variant

<script lang="ts">
  import { Vanilla as Toggle } from '@kumiki/atelier/toggle';
</script>

<Toggle.Root size="lg">Italic</Toggle.Root>

<!-- Theme via CSS custom properties:
     .kumiki-toggle { --kumiki-toggle-bg-on: oklch(0.85 0.15 252); } -->

Key	Effect
`Space, Enter`	Toggles pressed state.
`Tab`	Move focus into / out.

This component, layer by layer

Keyboard

Test discipline