# 单选按钮组

一组可供选择的按钮——称为单选按钮——在任何时候最多只能选择一个按钮。

## Features

- 完整的键盘导航。

- 支持水平/垂直方向。

- 可以是受控或非受控模式。

## [结构](#结构)

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

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

export default () => (
  <RadioGroup.Root>
    <RadioGroup.Item>
      <RadioGroup.Indicator />
    </RadioGroup.Item>
  </RadioGroup.Root>
);
```

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

### [根元素](#根元素)

包含单选按钮组的所有部分。

| Prop            | Type       | Default          |
| --------------- | ---------- | ---------------- |
| `asChild`       | `boolean`  | `false`          |
| `defaultValue`  | `string`   | No default value |
| `value`         | `string`   | No default value |
| `onValueChange` | `function` | No default value |
| `disabled`      | `boolean`  | No default value |
| `name`          | `string`   | No default value |
| `required`      | `boolean`  | No default value |
| `orientation`   | `enum`     | `undefined`      |
| `dir`           | `enum`     | No default value |
| `loop`          | `boolean`  | `true`           |

| Data attribute    | Values     |
| ----------------- | ---------- |
| `[data-disabled]` | 禁用时存在 |

### [项目](#项目)

组中的一个可被选中的项目。当在 `form` 中使用时，它将渲染一个 `input` 以确保事件正确传播。

| Prop       | Type      | Default          |
| ---------- | --------- | ---------------- |
| `asChild`  | `boolean` | `false`          |
| `value`    | `string`  | No default value |
| `disabled` | `boolean` | No default value |
| `required` | `boolean` | No default value |

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

### [指示器](#指示器)

当单选按钮项处于选中状态时渲染。您可以直接设置该元素的样式，也可以将其用作放置图标的包装器，或二者兼有。

| Prop         | Type      | Default          |
| ------------ | --------- | ---------------- |
| `asChild`    | `boolean` | `false`          |
| `forceMount` | `boolean` | No default value |

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

## [可访问性](#可访问性)

遵循 [单选按钮组 WAI-ARIA 设计模式](https://www.w3.org/WAI/ARIA/apg/patterns/radio) 并使用 [移动 tabindex](https://www.w3.org/WAI/ARIA/apg/patterns/radio/examples/radio) 来管理单选按钮项之间的焦点移动。

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

| Key          | Description                                              |
| ------------ | -------------------------------------------------------- |
| `Tab`        | 将焦点移动到已选中的单选按钮项或组中的第一个单选按钮项。 |
| `Space`      | 当焦点位于未选中的单选按钮项时，选中它。                 |
| `ArrowDown`  | 移动焦点并选中组中的下一个单选按钮项。                   |
| `ArrowRight` | 移动焦点并选中组中的下一个单选按钮项。                   |
| `ArrowUp`    | 将焦点移动到组中的上一个单选按钮项。                     |
| `ArrowLeft`  | 将焦点移动到组中的上一个单选按钮项。                     |

<!--$-->

<!--/$-->