# Switch

> A sliding on/off control that takes effect immediately, built on a native checkbox input.

- Package: `fancy-ui-svelte` (Svelte 5 + Tailwind CSS v4)
- Category: Forms
- Tags: switch, toggle, form, settings
- Docs: https://fancy-ui.rama.app/docs/components/switch
- Source: https://github.com/RamaHerbin/fancy-ui/tree/main/src/lib/fancy-ui/switch

## Import

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

Setup (once per project): `npm install fancy-ui-svelte`, then add `@import "fancy-ui-svelte/tailwind.css";` after `@import "tailwindcss";` in your main CSS file. Full guide: https://fancy-ui.rama.app/llms.txt

React: `import { Switch } from 'fancy-ui-react';` (same prop names; `class` becomes `className`, snippets become `ReactNode`).

## 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 |

## Snippets

| Snippet | Description |
| --- | --- |
| `children` | Visible label text, rendered beside the track |

## Examples

### Basic Usage

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

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

	let notifications = $state(false);
</script>

<Switch sound bind:checked={notifications} label="Notifications" />
```

### Sizes

The three available sizes, sm/md/lg.

```svelte
<script lang="ts">
	import { Switch, type SwitchSize } from "fancy-ui-svelte";

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

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

### With Label

Visible label text rendered beside the track via children.

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

	let notifications = $state(true);
</script>

<Switch sound bind:checked={notifications}>Notifications</Switch>
```