# Switch

> A native checkbox styled and wired as an on/off switch: a pill-shaped track whose thumb slides from the inline-start edge to the inline-end edge when checked, tinting with the semantic primary color along the way.

```ts
import { Switch } from "@sdxc/ui";
```

Renders a single `<input type="checkbox" role="switch">`. It carries no
`aria-checked` because an authored value would go stale the instant the
switch is flipped; the live control's own checkedness is what persists.

## Examples

```tsx
<Switch name="notifications" defaultChecked>{t("settings.notifications.label")}</Switch>
```

```tsx
<Label>
	{t("settings.notifications.label")}
	<Switch name="notifications" defaultChecked />
</Label>
```

```tsx
<Switch aria-label={t("settings.darkMode")} checked={isDark} disabled={isLocked} />
```

```tsx
<Switch aria-label={t("settings.notifications")} mix={[ariaChecked()]} />
```

## Props

| Prop | Type | Description |
| --- | --- | --- |
| `children?` | `RemixNode` | Visible label text rendered after the track, inside the same native `<label>` wrapping both, so clicking either half toggles the switch with no separate `htmlFor`/`id` pairing required. |

Also accepts everything in `Omit<TagProps<"input">, "type" | "role" | "aria-checked">`.