Installation
pnpm dlx shadcn-svelte@latest add https://coss-sv.vercel.app/r/toggle.jsonUsage
<script lang="ts">
import { Toggle } from "$lib/components/ui/toggle/index.js";
</script>
<Toggle>Toggle</Toggle>API Reference
Toggle
Styled wrapper for the Shards toggle with variant and size options.
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "default" \| "outline" | "default" | Controls the toggle styling |
size | "default" \| "sm" \| "lg" | "default" | Controls the toggle size |
pressed | boolean | false | Current pressed state; supports bind:pressed |
onPressedChange | (pressed: boolean) => void | — | Runs when the pressed state changes |
disabled | boolean | false | Prevents focus and activation |
value | string | auto | Identifies the toggle inside a Toggle Group |
as | keyof HTMLElementTagNameMap | "button" | HTML element to render |
See the Shards Toggle API for state and keyboard props.