# 复选框卡片

一组可以同时选择多个选项的互动卡片。

```jsx
<Box maxWidth="600px">
  <CheckboxCards.Root defaultValue={["1"]} columns={{ initial: "1", sm: "3" }}>
    <CheckboxCards.Item value="1">
      <Flex direction="column" width="100%">
        <Text weight="bold">A1 键盘</Text>

        <Text>美国布局</Text>
      </Flex>
    </CheckboxCards.Item>

    <CheckboxCards.Item value="2">
      <Flex direction="column" width="100%">
        <Text weight="bold">专业鼠标</Text>

        <Text>零延迟无线</Text>
      </Flex>
    </CheckboxCards.Item>

    <CheckboxCards.Item value="3">
      <Flex direction="column" width="100%">
        <Text weight="bold">闪电垫</Text>

        <Text>无线充电</Text>
      </Flex>
    </CheckboxCards.Item>
  </CheckboxCards.Root>
</Box>
```

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

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

### [根节点](#根节点)

| Prop           | Type                            | Default                                  |
| -------------- | ------------------------------- | ---------------------------------------- |
| `asChild`      | `boolean`                       | No default value                         |
| `size`         | `Responsive<"1" \| "2" \| "3">` | `"2"`                                    |
| `variant`      | `"surface" \| "classic"`        | `"surface"`                              |
| `color`        | `enum`                          | No default value                         |
| `highContrast` | `boolean`                       | No default value                         |
| `columns`      | `Responsive<enum \| string>`    | `"repeat(auto-fit, minmax(200px, 1fr))"` |
| `gap`          | `Responsive<enum \| string>`    | `"4"`                                    |

### [项](#项)

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

## [示例](#示例)

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

使用 `size` 属性来控制尺寸。

```jsx
<Flex align="center" gap="3">
  <CheckboxCards.Root defaultValue={["1"]} size="1">
    <CheckboxCards.Item value="1">同意条款</CheckboxCards.Item>
  </CheckboxCards.Root>

  <CheckboxCards.Root defaultValue={["1"]} size="2">
    <CheckboxCards.Item value="1">同意条款</CheckboxCards.Item>
  </CheckboxCards.Root>

  <CheckboxCards.Root defaultValue={["1"]} size="3">
    <CheckboxCards.Item value="1">同意条款</CheckboxCards.Item>
  </CheckboxCards.Root>
</Flex>
```

### [变体](#变体)

使用 `variant` 属性来控制视觉风格。

```jsx
<Flex direction="column" gap="3" maxWidth="200px">
  <CheckboxCards.Root defaultValue={["1"]} variant="surface">
    <CheckboxCards.Item value="1">同意条款</CheckboxCards.Item>
  </CheckboxCards.Root>

  <CheckboxCards.Root defaultValue={["1"]} variant="classic">
    <CheckboxCards.Item value="1">同意条款</CheckboxCards.Item>
  </CheckboxCards.Root>
</Flex>
```

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

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

```jsx
<Flex direction="column" gap="3" maxWidth="200px">
  <CheckboxCards.Root defaultValue={["1"]} color="indigo">
    <CheckboxCards.Item value="1">同意条款</CheckboxCards.Item>
  </CheckboxCards.Root>

  <CheckboxCards.Root defaultValue={["1"]} color="cyan">
    <CheckboxCards.Item value="1">同意条款</CheckboxCards.Item>
  </CheckboxCards.Root>

  <CheckboxCards.Root defaultValue={["1"]} color="orange">
    <CheckboxCards.Item value="1">同意条款</CheckboxCards.Item>
  </CheckboxCards.Root>

  <CheckboxCards.Root defaultValue={["1"]} color="crimson">
    <CheckboxCards.Item value="1">同意条款</CheckboxCards.Item>
  </CheckboxCards.Root>
</Flex>
```

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

使用 `highContrast` 属性来增加与背景的颜色对比。

```jsx
<Grid columns="2" gap="3" display="inline-grid">
  <CheckboxCards.Root defaultValue={["1"]} color="indigo">
    <CheckboxCards.Item value="1">同意条款</CheckboxCards.Item>
  </CheckboxCards.Root>

  <CheckboxCards.Root defaultValue={["1"]} color="indigo" highContrast>
    <CheckboxCards.Item value="1">同意条款</CheckboxCards.Item>
  </CheckboxCards.Root>

  <CheckboxCards.Root defaultValue={["1"]} color="cyan">
    <CheckboxCards.Item value="1">同意条款</CheckboxCards.Item>
  </CheckboxCards.Root>

  <CheckboxCards.Root defaultValue={["1"]} color="cyan" highContrast>
    <CheckboxCards.Item value="1">同意条款</CheckboxCards.Item>
  </CheckboxCards.Root>

  <CheckboxCards.Root defaultValue={["1"]} color="orange">
    <CheckboxCards.Item value="1">同意条款</CheckboxCards.Item>
  </CheckboxCards.Root>

  <CheckboxCards.Root defaultValue={["1"]} color="orange" highContrast>
    <CheckboxCards.Item value="1">同意条款</CheckboxCards.Item>
  </CheckboxCards.Root>

  <CheckboxCards.Root defaultValue={["1"]} color="crimson">
    <CheckboxCards.Item value="1">同意条款</CheckboxCards.Item>
  </CheckboxCards.Root>

  <CheckboxCards.Root defaultValue={["1"]} color="crimson" highContrast>
    <CheckboxCards.Item value="1">同意条款</CheckboxCards.Item>
  </CheckboxCards.Root>
</Grid>
```

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

```jsx
<Flex direction="column" gap="4" maxWidth="450px">
  <CheckboxCards.Root columns="2" defaultValue="2">
    <CheckboxCards.Item value="1">关闭</CheckboxCards.Item>

    <CheckboxCards.Item value="2">开启</CheckboxCards.Item>
  </CheckboxCards.Root>

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

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

<!--$-->

<!--/$-->