# 复选框

基础输入元素，用于开启和关闭选项。

```jsx
<Text as="label" size="2">
  <Flex gap="2">
    <Checkbox defaultChecked />
    同意条款和条件
  </Flex>
</Text>
```

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

该组件继承自 [Checkbox 原始组件](/primitives/docs/components/checkbox) 的属性，并支持 [常用边距属性](/themes/docs/overview/layout#margin-props)。

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

## [示例](#示例)

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

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

```jsx
<Flex align="center" gap="2">
  <Checkbox size="1" defaultChecked />

  <Checkbox size="2" defaultChecked />

  <Checkbox size="3" defaultChecked />
</Flex>
```

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

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

```jsx
<Flex align="center" gap="4">
  <Flex gap="2">
    <Checkbox variant="surface" defaultChecked />

    <Checkbox variant="surface" />
  </Flex>

  <Flex gap="2">
    <Checkbox variant="classic" defaultChecked />

    <Checkbox variant="classic" />
  </Flex>

  <Flex gap="2">
    <Checkbox variant="soft" defaultChecked />

    <Checkbox variant="soft" />
  </Flex>
</Flex>
```

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

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

```jsx
<Flex gap="2">
  <Checkbox color="indigo" defaultChecked />

  <Checkbox color="cyan" defaultChecked />

  <Checkbox color="orange" defaultChecked />

  <Checkbox color="crimson" defaultChecked />
</Flex>
```

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

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

```jsx
<Grid columns="5" display="inline-grid" gap="2">
  <Checkbox color="indigo" defaultChecked />

  <Checkbox color="cyan" defaultChecked />

  <Checkbox color="orange" defaultChecked />

  <Checkbox color="crimson" defaultChecked />

  <Checkbox color="gray" defaultChecked />

  <Checkbox color="indigo" defaultChecked highContrast />

  <Checkbox color="cyan" defaultChecked highContrast />

  <Checkbox color="orange" defaultChecked highContrast />

  <Checkbox color="crimson" defaultChecked highContrast />

  <Checkbox color="gray" defaultChecked highContrast />
</Grid>
```

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

将 `Checkbox` 嵌套在 `Text` 中会自动将其与第一行文本居中对齐。

```jsx
<Flex direction="column" gap="3">
  <Text as="label" size="2">
    <Flex as="span" gap="2">
      <Checkbox size="1" defaultChecked /> 同意条款和条件
    </Flex>
  </Text>

  <Text as="label" size="3">
    <Flex as="span" gap="2">
      <Checkbox size="2" defaultChecked /> 同意条款和条件
    </Flex>
  </Text>

  <Text as="label" size="4">
    <Flex as="span" gap="2">
      <Checkbox size="3" defaultChecked /> 同意条款和条件
    </Flex>
  </Text>
</Flex>
```

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

```jsx
<Box maxWidth="300px">
  <Text as="label" size="3">
    <Flex as="span" gap="2">
      <Checkbox defaultChecked /> 我理解这些文件是保密的，不能分享给第三方。
    </Flex>
  </Text>
</Box>
```

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

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

```jsx
<Flex direction="column" gap="2">
  <Text as="label" size="2">
    <Flex as="span" gap="2">
      <Checkbox />
      未选中
    </Flex>
  </Text>

  <Text as="label" size="2">
    <Flex as="span" gap="2">
      <Checkbox defaultChecked />
      已选中
    </Flex>
  </Text>

  <Text as="label" size="2" color="gray">
    <Flex as="span" gap="2">
      <Checkbox disabled />
      未选中
    </Flex>
  </Text>

  <Text as="label" size="2" color="gray">
    <Flex as="span" gap="2">
      <Checkbox disabled defaultChecked />
      已选中
    </Flex>
  </Text>
</Flex>
```

### [不确定](#不确定)

使用 `"indeterminate"` 值创建一个不确定状态的复选框。

```jsx
<Flex gap="2">
  <Checkbox defaultChecked="indeterminate" />

  <Checkbox checked="indeterminate" />
</Flex>
```

<!--$-->

<!--/$-->