# Switch
Toggle between two states, such as on/off.

```svelte
<script lang="ts">
	import { Switch } from '@skeletonlabs/skeleton-svelte';
</script>

<Switch>
	<Switch.Control>
		<Switch.Thumb />
	</Switch.Control>
	<Switch.Label>Label</Switch.Label>
	<Switch.HiddenInput />
</Switch>

```

## List

```svelte
<script lang="ts">
	import { Switch } from '@skeletonlabs/skeleton-svelte';
</script>

<div class="grid gap-2 w-full">
	{#each ['Label 1', 'Label 2', 'Label 3'] as label, i (label)}
		<Switch class="flex justify-between p-2">
			<Switch.Label>{label}</Switch.Label>
			<Switch.Control>
				<Switch.Thumb />
			</Switch.Control>
			<Switch.HiddenInput />
		</Switch>
		{#if i < 2}
			<hr class="hr" />
		{/if}
	{/each}
</div>

```

## Icons

```svelte
<script lang="ts">
	import Moon from '@lucide/svelte/icons/moon';
	import Sun from '@lucide/svelte/icons/sun';
	import { Switch } from '@skeletonlabs/skeleton-svelte';
</script>

<Switch>
	<Switch.Control>
		<Switch.Thumb>
			<Switch.Context>
				{#snippet children(switch_)}
					{#if switch_().checked}
						<Sun class="size-3" />
					{:else}
						<Moon class="size-3" />
					{/if}
				{/snippet}
			</Switch.Context>
		</Switch.Thumb>
	</Switch.Control>
	<Switch.HiddenInput />
</Switch>

```

## Direction

```svelte
<script lang="ts">
	import { Switch } from '@skeletonlabs/skeleton-svelte';
</script>

<Switch dir="rtl">
	<Switch.Control>
		<Switch.Thumb />
	</Switch.Control>
	<Switch.Label>Label</Switch.Label>
	<Switch.HiddenInput />
</Switch>

```

## API Reference

### SwitchRoot

| Property | Type | Description |
| --- | --- | --- |
| `ids` | Partial<{ root: string; hiddenInput: string; control: string; label: string; thumb: string; }> | undefined | The ids of the elements in the switch. Useful for composition. |
| `label` | string | undefined | Specifies the localized strings that identifies the accessibility elements and their states |
| `disabled` | boolean | undefined | Whether the switch is disabled. |
| `invalid` | boolean | undefined | If `true`, the switch is marked as invalid. |
| `required` | boolean | undefined | If `true`, the switch input is marked as required, |
| `readOnly` | boolean | undefined | Whether the switch is read-only |
| `onCheckedChange` | ((details: CheckedChangeDetails) => void) | undefined | Function to call when the switch is clicked. |
| `checked` | boolean | undefined | The controlled checked state of the switch |
| `defaultChecked` | boolean | undefined | The initial checked state of the switch when rendered. Use when you don't need to control the checked state of the switch. |
| `name` | string | undefined | The name of the input field in a switch (Useful for form submission). |
| `form` | string | undefined | The id of the form that the switch belongs to |
| `value` | string | number | undefined | The value of switch input. Useful for form submission. Default: "on" |
| `dir` | "ltr" | "rtl" | undefined | The document's text/writing direction. Default: "ltr" |
| `getRootNode` | (() => ShadowRoot | Node | Document) | undefined | A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron. |
| `element` | Snippet<[HTMLAttributes<"label">]> | undefined | Render the element yourself |

### SwitchRootProvider

| Property | Type | Description |
| --- | --- | --- |
| `value`* | () => SwitchApi<PropTypes> |  |
| `element` | Snippet<[HTMLAttributes<"label">]> | undefined | Render the element yourself |

### SwitchRootContext

| Property | Type | Description |
| --- | --- | --- |
| `children`* | Snippet<[() => SwitchApi<PropTypes>]> |  |

### SwitchControl

| Property | Type | Description |
| --- | --- | --- |
| `element` | Snippet<[HTMLAttributes<"span">]> | undefined | Render the element yourself |

### SwitchThumb

| Property | Type | Description |
| --- | --- | --- |
| `element` | Snippet<[HTMLAttributes<"span">]> | undefined | Render the element yourself |

### SwitchLabel

| Property | Type | Description |
| --- | --- | --- |
| `element` | Snippet<[HTMLAttributes<"span">]> | undefined | Render the element yourself |

### SwitchHiddenInput

| Property | Type | Description |
| --- | --- | --- |
| `element` | Snippet<[HTMLAttributes<"input">]> | undefined | Render the element yourself |