Switch

Preview

Installation

pnpm add fancy-ui-svelte

import { Switch } from 'fancy-ui-svelte'

Usage

svelte

<script lang="ts">
  import { Switch } from 'fancy-ui-svelte';
</script>

<Switch />

Examples

Basic Usage

A single switch with a bound checked state and no visible label text.

Sizes

The three available sizes, sm/md/lg.

svelte

<script lang="ts">
	import { Switch, type SwitchSize } from "$lib/fancy-ui/switch";

	const sizes: SwitchSize[] = ["sm", "md", "lg"];
</script>

<div class="flex flex-wrap items-center gap-6">
	{#each sizes as size (size)}
		<Switch {size} checked label={`Size ${size}`} />
	{/each}
</div>

With Label

Visible label text rendered beside the track via children.

Props

Prop	Type	Default	Description
`checked`	boolean	`false`	Whether the switch is on; bindable
`onCheckedChange`	(checked: boolean) => void	-	Called with the new value whenever the switch is activated
`disabled`	boolean	`false`	Blocks interaction; excluded from form submission
`required`	boolean	`false`	Native required
`id`	string	-	Element id
`name`	string	-	Native name, read on form submission
`value`	string	-	Form value submitted while on
`label`	string	-	Accessible name, rendered as aria-label; skip it when children already supplies the visible label text
`size`	"sm" \| "md" \| "lg"	`"md"`	Track/knob size
`class`	string	-	Additional CSS classes, merged onto the wrapping label
`ref`	HTMLInputElement \| null	`null`	Bindable element reference to the native input
`sound`	boolean	`false`	Plays toggle-on or toggle-off on each change, once the user has enabled sound