Forms

Switch

Turns a single setting on or off, taking effect immediately.

Installation

npx sinaui add switch

Copy src/lib/ui/Switch.svelte and tokens.css. No dependencies.

Examples

Basic

A native checkbox underneath: it submits with its form as name=on.

<script lang="ts">
	import Switch from '#lib/ui/Switch.svelte';

	let notify = $state(true);
</script>

<form method="post">
	<Switch name="notify" bind:checked={notify}>Notify me of new translations</Switch>
</form>

Disabled

Lend to the Córdoba library

<script lang="ts">
	import Switch from '#lib/ui/Switch.svelte';
</script>

<Switch disabled>Lend to the Córdoba library</Switch>

Without a visible label

When the context makes it obvious, name it with aria-label instead.

<script lang="ts">
	import Switch from '#lib/ui/Switch.svelte';
</script>

<Switch aria-label="Observatory night mode" />

Props

Prop	Type	Default
`checked`	`boolean`, bindable	`false`
`children`	Snippet: the visible label
…rest	Any `<input>` attribute (`name`, `disabled`, `aria-label`…).

Accessibility

A native checkbox with role="switch": form submission, reset and label clicks need no JavaScript.
The thumb, not the track, shows the state, with at least 3:1 contrast in both positions.
Use a switch for settings that apply immediately; use a checkbox for choices submitted with a form.

Key	Action
`Space`	Toggles the switch.