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

```tsx

	return (
		<Switch>
			<Switch.Control>
				<Switch.Thumb />
			</Switch.Control>
			<Switch.Label>Label</Switch.Label>
			<Switch.HiddenInput />
		</Switch>
	);
}

```

## List

```tsx

	return (
		<div className="grid gap-2 w-full">
			{['Option 1', 'Option 2', 'Option 3'].map((label, i) => (
				<div key={label}>
					<Switch className="flex justify-between p-2">
						<Switch.Label>{label}</Switch.Label>
						<Switch.Control>
							<Switch.Thumb />
						</Switch.Control>
						<Switch.HiddenInput />
					</Switch>
					{i < 2 && <hr className="hr" />}
				</div>
			))}
		</div>
	);
}

```

## Icons

```tsx

	return (
		<Switch>
			<Switch.HiddenInput />
			<Switch.Control>
				<Switch.Thumb>
					<Switch.Context>
						{(switch_) => (switch_.checked ? <SunIcon className="size-3" /> : <MoonIcon className="size-3" />)}
					</Switch.Context>
				</Switch.Thumb>
			</Switch.Control>
			<Switch.Label>Label</Switch.Label>
		</Switch>
	);
}

```

## Direction

```tsx

	return (
		<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` | ((attributes: HTMLAttributes<"label">) => Element), undefined | Render the element yourself |

### SwitchRootProvider

| Property | Type | Description |
| --- | --- | --- |
| `value`* | SwitchApi<PropTypes> |  |
| `element` | ((attributes: HTMLAttributes<"label">) => Element), undefined | Render the element yourself |

### SwitchRootContext

| Property | Type | Description |
| --- | --- | --- |
| `children`* | (switch_: SwitchApi<PropTypes>) => ReactNode |  |

### SwitchControl

| Property | Type | Description |
| --- | --- | --- |
| `element` | ((attributes: HTMLAttributes<"span">) => Element), undefined | Render the element yourself |

### SwitchThumb

| Property | Type | Description |
| --- | --- | --- |
| `element` | ((attributes: HTMLAttributes<"span">) => Element), undefined | Render the element yourself |

### SwitchLabel

| Property | Type | Description |
| --- | --- | --- |
| `element` | ((attributes: HTMLAttributes<"span">) => Element), undefined | Render the element yourself |

### SwitchHiddenInput

| Property | Type | Description |
| --- | --- | --- |
| `element` | ((attributes: HTMLAttributes<"input">) => Element), undefined | Render the element yourself |