Switch

A toggle control for switching between on and off states.

Airplane mode

<script lang="ts">
  import { Switch } from "$lib/components/ui/switch";
  import { Label } from "$lib/components/ui/label";
</script>
 
<div class="flex items-center gap-3">
  <Switch id="airplane" />
  <Label for="airplane">Airplane mode</Label>
</div>

Installation

npx lily-svelte@latest add switch

Install the lily base and `utils` (run once per project).

npx lily-svelte@latest init

Copy the switch source from the registry into `$lib/components/ui/switch`.

Usage

<script lang="ts">
	import { Switch } from '$lib/components/ui/switch';
 
	let enabled = $state(false);
</script>
 
<Switch bind:checked={enabled} />

← Stepper Table →