# Switch

## API

### React

Switches toggle the selection of a single item on or off.

**Status:** beta

**Category:** Input

**Devx**

- Use `checked` with `onCheckedChange` for controlled state, or `defaultChecked` for uncontrolled state.
- The thumb slide is driven by a shared `@udixio/core/dom` Anime.js tween controller, the same one the Angular
  adapter uses -- an accepted exception to the rest of `@udixio/core/dom`, which uses Motion.

**Accessibility**

- Renders `role="switch"` with `aria-checked` and standard Space/Enter activation.

**Limitations**

- The component does not render a visible label; provide one with `aria-label` or `aria-labelledby`.

#### Props

| Name | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `className` | `string \| ClassNameComponent<SwitchInterface>` | No | — | Classes or state-aware element classes applied through the shared style contract. |
| `defaultChecked` | `boolean` | No | `false` | Uncontrolled mode: initial checked state. |
| `checked` | `boolean` | No | — | Controlled mode: explicitly control whether the switch is on. |
| `activeIcon` | `Icon` | No | — | Icon shown inside the thumb while checked. |
| `inactiveIcon` | `Icon` | No | — | Icon shown inside the thumb while unchecked. |
| `disabled` | `boolean` | No | `false` | Prevents interaction. |
| `onCheckedChange` | `(checked: boolean) => void` | No | — | Called once for each accepted checked-state transition. |

### Angular

Switches toggle the selection of a single item on or off.

**Status:** beta

**Category:** Input

**Devx**

- `checked` is controlled; `defaultChecked` initializes uncontrolled use.
- `checkedChange` emits one accepted transition and supports `[(checked)]`.
- The thumb slide is driven by a shared `@udixio/core/dom` Anime.js tween controller, the same one the React
  adapter uses -- an accepted exception to the rest of `@udixio/core/dom`, which uses Motion.

**Accessibility**

- Renders `role="switch"` with `aria-checked` and standard Space/Enter activation.

**Limitations**

- The component does not render a visible label; provide one with `aria-label` or `aria-labelledby`.

#### Inputs

| Name | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `checked` | `boolean \| undefined` | No | — | Controlled mode: explicitly control whether the switch is on. |
| `defaultChecked` | `boolean` | No | `false` | Uncontrolled mode: initial checked state. |
| `activeIcon` | `IconType` | No | — | Icon shown inside the thumb while checked. |
| `inactiveIcon` | `IconType` | No | — | Icon shown inside the thumb while unchecked. |
| `disabled` | `boolean` | No | `false` | Prevents interaction. |
| `ariaLabel` (alias: `aria-label`) | `string \| undefined` | No | — | Accessible-name override when no visible label is available. |
| `ariaLabelledBy` (alias: `aria-labelledby`) | `string \| undefined` | No | — | Id reference for text that labels this switch. |
| `className` | `string \| ClassNameComponent<SwitchInterface>` | No | — | Classes or state-aware element classes applied through the shared style contract. |

#### Outputs

| Name | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `checkedChange` | `boolean` | No | — | Emits an accepted checked-state request and supports `[(checked)]`. |