# 开关

允许用户在选中和未选中之间切换的控件。

## Features

- 完整的键盘导航。

- 可以是受控或非受控。

## [结构](#结构)

导入所有部分并将它们组合在一起。

```jsx
import { Switch } from "radix-ui";

export default () => (
  <Switch.Root>
    <Switch.Thumb />
  </Switch.Root>
);
```

## [API 参考](#api-参考)

### [根部](#根部)

包含开关的所有部分。使用在`form`内时也会渲染一个`input`，以确保事件正确传播。

| Prop              | Type       | Default          |
| ----------------- | ---------- | ---------------- |
| `asChild`         | `boolean`  | `false`          |
| `defaultChecked`  | `boolean`  | No default value |
| `checked`         | `boolean`  | No default value |
| `onCheckedChange` | `function` | No default value |
| `disabled`        | `boolean`  | No default value |
| `required`        | `boolean`  | No default value |
| `name`            | `string`   | No default value |
| `value`           | `string`   | `on`             |

| Data attribute    | Values                     |
| ----------------- | -------------------------- |
| `[data-state]`    | `"checked" \| "unchecked"` |
| `[data-disabled]` | 禁用时出现                 |

### [拇指](#拇指)

用于直观指示开关是开还是关的部分。

| Prop      | Type      | Default |
| --------- | --------- | ------- |
| `asChild` | `boolean` | `false` |

| Data attribute    | Values                     |
| ----------------- | -------------------------- |
| `[data-state]`    | `"checked" \| "unchecked"` |
| `[data-disabled]` | 禁用时出现                 |

## [可及性](#可及性)

符合[`switch`角色要求](https://www.w3.org/WAI/ARIA/apg/patterns/switch)。

### [键盘交互](#键盘交互)

| Key     | Description      |
| ------- | ---------------- |
| `Space` | 切换组件的状态。 |
| `Enter` | 切换组件的状态。 |

<!--$-->

<!--/$-->