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

```

## Checked Color

Use the [Tailwind data attribute syntax](https://tailwindcss.com/docs/hover-focus-and-other-states#data-attributes) to target the active state using `data-[state=checked]`

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

<Switch>
	<Switch.Control class="data-[state=checked]:preset-filled-success-500">
		<Switch.Thumb />
	</Switch.Control>
	<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 { MoonIcon, SunIcon } from '@lucide/svelte';
	import { Switch } from '@skeletonlabs/skeleton-svelte';
</script>

<Switch>
	<Switch.Control>
		<Switch.Thumb>
			<Switch.Context>
				{#snippet children(switch_)}
					{#if switch_().checked}
						<SunIcon class="size-3" />
					{:else}
						<MoonIcon 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

### SwitchRootProps

| Property         | Default | 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.&#xA;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&#xA;(Useful for form submission).                                                      |
| form?            | -       | string \| undefined                                                                                           | The id of the form that the switch belongs to                                                                                  |
| value?           | "on"    | string \| number \| undefined                                                                                 | The value of switch input. Useful for form submission.                                                                         |
| dir?             | "ltr"   | "ltr" \| "rtl" \| undefined                                                                                   | The document's text/writing direction.                                                                                         |
| 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                                                                                                    |

### SwitchRootProviderProps

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

### SwitchRootContextProps

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

### SwitchControlProps

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

### SwitchThumbProps

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

### SwitchLabelProps

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

### SwitchHiddenInputProps

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