# 复选框组

一组交互式按钮，可以同时选择多个选项。

```jsx
<CheckboxGroup.Root defaultValue={["1"]} name="example">
  <CheckboxGroup.Item value="1">有趣</CheckboxGroup.Item>

  <CheckboxGroup.Item value="2">严肃</CheckboxGroup.Item>

  <CheckboxGroup.Item value="3">聪明</CheckboxGroup.Item>
</CheckboxGroup.Root>
```

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

该组件基于 `div` 元素，并支持 [常见的边距属性](/themes/docs/overview/layout#margin-props)。

### [Root](#root)

包含复选框组的所有部分。

| Prop           | Type                               | Default          |
| -------------- | ---------------------------------- | ---------------- |
| `asChild`      | `boolean`                          | No default value |
| `size`         | `Responsive<"1" \| "2" \| "3">`    | `"2"`            |
| `variant`      | `"classic" \| "surface" \| "soft"` | `"surface"`      |
| `color`        | `enum`                             | No default value |
| `highContrast` | `boolean`                          | No default value |

### [Item](#item)

组中的一个可被选中的项。

## [示例](#示例)

### [尺寸](#尺寸)

使用 `size` 属性来控制复选框的大小。

```jsx
<Flex align="center" gap="2">
  <CheckboxGroup.Root size="1" defaultValue={["1"]}>
    <CheckboxGroup.Item value="1" />
  </CheckboxGroup.Root>

  <CheckboxGroup.Root size="2" defaultValue={["2"]}>
    <CheckboxGroup.Item value="2" />
  </CheckboxGroup.Root>

  <CheckboxGroup.Root size="3" defaultValue={["3"]}>
    <CheckboxGroup.Item value="3" />
  </CheckboxGroup.Root>
</Flex>
```

### [样式](#样式)

使用 `variant` 属性来控制复选框的视觉样式。

```jsx
<Flex gap="2">
  <Flex direction="column" asChild gap="2">
    <CheckboxGroup.Root variant="surface" defaultValue={["1"]}>
      <CheckboxGroup.Item value="1" />

      <CheckboxGroup.Item value="2" />
    </CheckboxGroup.Root>
  </Flex>

  <Flex direction="column" asChild gap="2">
    <CheckboxGroup.Root variant="classic" defaultValue={["1"]}>
      <CheckboxGroup.Item value="1" />

      <CheckboxGroup.Item value="2" />
    </CheckboxGroup.Root>
  </Flex>

  <Flex direction="column" asChild gap="2">
    <CheckboxGroup.Root variant="soft" defaultValue={["1"]}>
      <CheckboxGroup.Item value="1" />

      <CheckboxGroup.Item value="2" />
    </CheckboxGroup.Root>
  </Flex>
</Flex>
```

### [颜色](#颜色)

使用 `color` 属性分配特定的 [颜色](/themes/docs/theme/color)。

```jsx
<Flex gap="2">
  <CheckboxGroup.Root color="indigo" defaultValue={["1"]}>
    <CheckboxGroup.Item value="1" />
  </CheckboxGroup.Root>

  <CheckboxGroup.Root color="cyan" defaultValue={["1"]}>
    <CheckboxGroup.Item value="1" />
  </CheckboxGroup.Root>

  <CheckboxGroup.Root color="orange" defaultValue={["1"]}>
    <CheckboxGroup.Item value="1" />
  </CheckboxGroup.Root>

  <CheckboxGroup.Root color="crimson" defaultValue={["1"]}>
    <CheckboxGroup.Item value="1" />
  </CheckboxGroup.Root>
</Flex>
```

### [高对比度](#高对比度)

使用 `highContrast` 属性增加与背景的对比度。

```jsx
<Grid rows="2" gap="2" display="inline-grid" flow="column">
  <CheckboxGroup.Root color="indigo" defaultValue={["1"]}>
    <CheckboxGroup.Item value="1" />
  </CheckboxGroup.Root>

  <CheckboxGroup.Root color="indigo" defaultValue={["1"]} highContrast>
    <CheckboxGroup.Item value="1" />
  </CheckboxGroup.Root>

  <CheckboxGroup.Root color="cyan" defaultValue={["1"]}>
    <CheckboxGroup.Item value="1" />
  </CheckboxGroup.Root>

  <CheckboxGroup.Root color="cyan" defaultValue={["1"]} highContrast>
    <CheckboxGroup.Item value="1" />
  </CheckboxGroup.Root>

  <CheckboxGroup.Root color="orange" defaultValue={["1"]}>
    <CheckboxGroup.Item value="1" />
  </CheckboxGroup.Root>

  <CheckboxGroup.Root color="orange" defaultValue={["1"]} highContrast>
    <CheckboxGroup.Item value="1" />
  </CheckboxGroup.Root>

  <CheckboxGroup.Root color="crimson" defaultValue={["1"]}>
    <CheckboxGroup.Item value="1" />
  </CheckboxGroup.Root>

  <CheckboxGroup.Root color="crimson" defaultValue={["1"]} highContrast>
    <CheckboxGroup.Item value="1" />
  </CheckboxGroup.Root>

  <CheckboxGroup.Root color="gray" defaultValue={["1"]}>
    <CheckboxGroup.Item value="1" />
  </CheckboxGroup.Root>

  <CheckboxGroup.Root color="gray" defaultValue={["1"]} highContrast>
    <CheckboxGroup.Item value="1" />
  </CheckboxGroup.Root>
</Grid>
```

### [对齐](#对齐)

将 `CheckboxGroup.Item` 组合在 `Text` 中可以自动与第一行文本居中对齐。

```jsx
<Flex direction="column" gap="3">
  <CheckboxGroup.Root size="1" defaultValue={["1"]}>
    <Text as="label" size="2">
      <Flex gap="2">
        <CheckboxGroup.Item value="1" /> 默认
      </Flex>
    </Text>

    <Text as="label" size="2">
      <Flex gap="2">
        <CheckboxGroup.Item value="2" /> 紧凑
      </Flex>
    </Text>
  </CheckboxGroup.Root>

  <CheckboxGroup.Root size="2" defaultValue={["1"]}>
    <Text as="label" size="3">
      <Flex gap="2">
        <CheckboxGroup.Item value="1" /> 默认
      </Flex>
    </Text>

    <Text as="label" size="3">
      <Flex gap="2">
        <CheckboxGroup.Item value="2" /> 紧凑
      </Flex>
    </Text>
  </CheckboxGroup.Root>

  <CheckboxGroup.Root size="3" defaultValue={["1"]}>
    <Text as="label" size="4">
      <Flex gap="2">
        <CheckboxGroup.Item value="1" /> 默认
      </Flex>
    </Text>

    <Text as="label" size="4">
      <Flex gap="2">
        <CheckboxGroup.Item value="2" /> 紧凑
      </Flex>
    </Text>
  </CheckboxGroup.Root>
</Flex>
```

它也会与多行文本自动对齐。

### [禁用](#禁用)

使用原生 `disabled` 属性创建一个禁用的复选框。

```jsx
<Flex direction="column" gap="2">
  <CheckboxGroup.Root defaultValue={["2"]}>
    <CheckboxGroup.Item value="1">Off</CheckboxGroup.Item>

    <CheckboxGroup.Item value="2">On</CheckboxGroup.Item>
  </CheckboxGroup.Root>

  <CheckboxGroup.Root defaultValue="2">
    <CheckboxGroup.Item value="1" disabled>
      关闭
    </CheckboxGroup.Item>

    <CheckboxGroup.Item value="2" disabled>
      开启
    </CheckboxGroup.Item>
  </CheckboxGroup.Root>
</Flex>
```

<!--$-->

<!--/$-->