Switch

Installation#

pnpmnpmyarnbun
pnpm dlx shadcn@latest add @force-ui-svelte/switch
Copy

Usage#

Copy<script lang="ts">
  import { Switch } from "$lib/components/ui/switch/index.js";
</script>

Copy<Switch />

Examples#

Description#

Choice Card#

Card-style selection where Field.Label wraps the entire Field.Field for a clickable card pattern.

Disabled#

Add the disabled prop to the Switch component to disable the switch. Add the data-disabled prop to the Field.Field component for styling.

Invalid#

Add the aria-invalid prop to the Switch component to indicate an invalid state. Add the data-invalid prop to the Field.Field component for styling.

Size#

Use the size prop to change the size of the switch.

API Reference#

See the Radix Switch documentation.