Installation
pnpm dlx shadcn-svelte@latest add https://coss-sv.vercel.app/r/switch.jsonUsage
<script lang="ts">
import { Switch } from "$lib/components/ui/switch/index.js";
</script>
<Switch aria-label="Marketing emails" />API Reference
Switch
Switch includes the COSS thumb and responsive sizing. Use checked for an initial value or bind:checked for controlled state. Native form props and onCheckedChange pass to the Shards root.
See the Shards Switch API for form, validation, and state props.
Examples
For accessible labelling and validation, prefer using the Field component to wrap checkboxes. See the related example: Switch field.
Disabled
With Description
Customizing Size
The switch size is controlled by the --thumb-size CSS variable. By default, the switch uses responsive sizing with [--thumb-size:--spacing(5)] sm:[--thumb-size:--spacing(4)] classes, making it slightly larger on mobile devices (like other interactive elements).
You can customize the size by overriding these CSS variable classes on the component. The --thumb-size value can be expressed using:
- The spacing scale:
--spacing(3),--spacing(4),--spacing(5), etc. - Fixed units:
1rem,16px, etc.