Switch

Installation

pnpm dlx @mielui/svelte add switch

npx @mielui/svelte add switch

yarn dlx @mielui/svelte add switch

bunx @mielui/svelte add switch

The visible label names the switch; descriptions are linked separately. Explicit aria-label or aria-labelledby naming takes priority. External description IDs are preserved and deduplicated, and conditional descriptions are linked only while rendered.

Usage

Use name and value to include a checked switch in form submission. Both checked and the switched alias remain bindable. A label activates the switch, and supplied ARIA relationships are preserved.

Import Switch and bind its state:

import { Switch } from '$lib/mielui/components/switch';

<Switch bind:switched={enabled} label="Notifications" />