# 切换组

一组可以切换开启或关闭的两态按钮。

## Features

- 完整的键盘导航。

- 支持水平/垂直方向。

- 支持单个和多个被按下的按钮。

- 可以是受控或非受控。

## [结构](#结构)

导入组件。

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

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

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

### [根](#根)

包含切换组的所有部分。

| Prop            | Type       | Default          |
| --------------- | ---------- | ---------------- |
| `asChild`       | `boolean`  | `false`          |
| `type*`         | `enum`     | No default value |
| `value`         | `string`   | No default value |
| `defaultValue`  | `string`   | No default value |
| `onValueChange` | `function` | No default value |
| `value`         | `string[]` | `[]`             |
| `defaultValue`  | `string[]` | `[]`             |
| `onValueChange` | `function` | No default value |
| `disabled`      | `boolean`  | `false`          |
| `rovingFocus`   | `boolean`  | `true`           |
| `orientation`   | `enum`     | `undefined`      |
| `dir`           | `enum`     | No default value |
| `loop`          | `boolean`  | `true`           |

| Data attribute       | Values                       |
| -------------------- | ---------------------------- |
| `[data-orientation]` | `"vertical" \| "horizontal"` |

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

组中的一个项目。

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

| Data attribute       | Values                       |
| -------------------- | ---------------------------- |
| `[data-state]`       | `"on" \| "off"`              |
| `[data-disabled]`    | 禁用时存在                   |
| `[data-orientation]` | `"vertical" \| "horizontal"` |

## [示例](#示例)

### [确保始终有值](#确保始终有值)

您可以控制组件以确保一个值。

```jsx
import * as React from "react";

import { ToggleGroup } from "radix-ui";

export default () => {
  const [value, setValue] = React.useState("left");

  return (
    <ToggleGroup.Root
      type="single"
      value={value}
      onValueChange={(value) => {
        if (value) setValue(value);
      }}
    >
      <ToggleGroup.Item value="left">
        <TextAlignLeftIcon />
      </ToggleGroup.Item>

      <ToggleGroup.Item value="center">
        <TextAlignCenterIcon />
      </ToggleGroup.Item>

      <ToggleGroup.Item value="right">
        <TextAlignRightIcon />
      </ToggleGroup.Item>
    </ToggleGroup.Root>
  );
};
```

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

使用 [移动 tabindex](https://www.w3.org/TR/wai-aria-practices-1.2/examples/radio/radio.html) 来管理项目之间的焦点移动。

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

| Key          | Description                                  |
| ------------ | -------------------------------------------- |
| `Tab`        | 将焦点移动到被按下的项目或组中的第一个项目。 |
| `Space`      | 激活/取消激活该项目。                        |
| `Enter`      | 激活/取消激活该项目。                        |
| `ArrowDown`  | 将焦点移动到组中的下一个项目。               |
| `ArrowRight` | 将焦点移动到组中的下一个项目。               |
| `ArrowUp`    | 将焦点移动到组中的上一个项目。               |
| `ArrowLeft`  | 将焦点移动到组中的上一个项目。               |
| `Home`       | 将焦点移动到第一个项目。                     |
| `End`        | 将焦点移动到最后一个项目。                   |

<!--$-->

<!--/$-->