Field chrome

label renders above the switch (our standard, so rows of mixed controls align), with description/error below and an optional required marker; with none set the Toggle stays bare + inline as usual.

Email notifications

Product updates and receipts.

Accept terms

You must accept to continue.

import { Toggle } from '@spaethtech/svelte-ui';

let notify = $state(true);
let terms = $state(false);

<!-- label ABOVE + muted description below -->
<Toggle
  label="Email notifications"
  description="Product updates and receipts."
  bind:checked={notify}
/>

<!-- required + controlled error (inline error row) -->
<Toggle
  label="Accept terms"
  required
  bind:checked={terms}
  error={terms ? null : 'You must accept to continue.'}
/>

Variants

variant sets the switch's “on” colour.

<Toggle checked variant="primary" />
<Toggle checked variant="success" />
<Toggle checked variant="danger" />

Aligns with inputs

The switch stays switch-sized, but its wrapper takes the control height for its size, so it lines up on the same baseline as a same-size Input.

<!-- Same size → same baseline -->
<Input size="md" />
<Toggle size="md" bind:checked={value} />

Toggle Component

Field chrome

Basic

Variants

Sizes

Aligns with inputs

Disabled