基础输入元素，用于开启和关闭选项。
<Text as="label" size="2">
<Flex gap="2">
<Checkbox defaultChecked />
同意条款和条件
</Flex>
</Text>
该组件继承自 Checkbox 原始组件 的属性，并支持 常用边距属性。
| 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 属性来控制复选框的大小。
<Flex align="center" gap="2">
<Checkbox size="1" defaultChecked />
<Checkbox size="2" defaultChecked />
<Checkbox size="3" defaultChecked />
</Flex>
使用 variant 属性来控制复选框的视觉样式。
<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 属性为复选框指定特定的 颜色。
<Flex gap="2">
<Checkbox color="indigo" defaultChecked />
<Checkbox color="cyan" defaultChecked />
<Checkbox color="orange" defaultChecked />
<Checkbox color="crimson" defaultChecked />
</Flex>
使用 highContrast 属性以增加与背景的颜色对比度。
<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 中会自动将其与第一行文本居中对齐。
<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>
它也会与多行文本自动良好对齐。
<Box maxWidth="300px">
<Text as="label" size="3">
<Flex as="span" gap="2">
<Checkbox defaultChecked /> 我理解这些文件是保密的，不能分享给第三方。
</Flex>
</Text>
</Box>
使用原生的 disabled 属性创建一个禁用的复选框。
<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" 值创建一个不确定状态的复选框。
<Flex gap="2">
<Checkbox defaultChecked="indeterminate" />
<Checkbox checked="indeterminate" />
</Flex>