Basic

On Off

import { Toggle } from 'svelte-ui';

let a = $state(true);
let b = $state(false);

<Toggle bind:checked={a} />
<Toggle bind:checked={b} />

Sizes

sm md lg

<Toggle checked size="sm" />
<Toggle checked size="md" />
<Toggle checked size="lg" />

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.

sm

md

lg

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

on · disabled off · disabled

<Toggle checked disabled />
<Toggle disabled />