一组交互式按钮，可以同时选择多个选项。
<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>
该组件基于 div 元素，并支持 常见的边距属性。
包含复选框组的所有部分。
| 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 |
组中的一个可被选中的项。
使用 size 属性来控制复选框的大小。
<Flex align="center" gap="2">
<CheckboxGroup.Root size="1" defaultValue="1">
<CheckboxGroup.Item value="1" />
</CheckboxGroup.Root>
<CheckboxGroup.Root size="2" defaultValue="1">
<CheckboxGroup.Item value="1" />
</CheckboxGroup.Root>
<CheckboxGroup.Root size="3" defaultValue="1">
<CheckboxGroup.Item value="1" />
</CheckboxGroup.Root>
</Flex>
使用 variant 属性来控制复选框的视觉样式。
<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 属性分配特定的 颜色。
<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 属性增加与背景的对比度。
<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 中可以自动与第一行文本居中对齐。
<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 属性创建一个禁用的复选框。
<Flex direction="column" gap="2">
<CheckboxGroup.Root defaultValue="2">
<CheckboxGroup.Item value="1">关闭</CheckboxGroup.Item>
<CheckboxGroup.Item value="2">开启</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>