Switch

A toggle control for binary on/off states.

<script lang="ts">
import { Label, Switch } from "coss-svelte";
</script>

<Label>
	<Switch />
	Marketing emails
</Label>

Installation

Install the component package, shared coss-svelte theme, and Bits UI peer.

npm install coss-svelte @coss-svelte/theme bits-ui

Import the Svelte component exports directly from the package.

import { Switch, SwitchThumb } from "coss-svelte";

A toggle control for binary on/off states.

Prop	Type	Default	Description
`id`	`string`	`useId()`	ID forwarded to the form control.
`bind:checked`	`boolean`	`false`	Checked state for the control. Bind with `bind:checked` when supported.
`label`	`string`	`""`	Accessible label or fallback visible label for the control.

children : Snippet<[SwitchRootSnippetProps]>bind:ref : HTMLElement | null

Renders the draggable or moving indicator.

children : Snippet<[SwitchRootSnippetProps]>bind:ref : HTMLElement | null