一组交互式按钮，允许用户同时选择多个选项。
<CheckboxGroup.Root defaultValue={['1']} name="example">
<CheckboxGroup.Item value="1">Fun</CheckboxGroup.Item>
<CheckboxGroup.Item value="2">Serious</CheckboxGroup.Item>
<CheckboxGroup.Item value="3">Smart</CheckboxGroup.Item>
</CheckboxGroup.Root>
此组件基于 div 元素并支持 常见的边距属性.
包含复选框组的所有部分。
| 属性 | 类型 | 默认值 |
|---|---|---|
asChild | 布尔值 | 无默认值 |
大小 | 响应式<"1" | "2" | "3"> | "2" |
变体 | "经典" | "表面" | "柔和" | "表面" |
颜色 | 枚举 | 无默认值 |
高对比度 | 布尔值 | 无默认值 |
组中可以选中的一项。
使用 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" /> Default
</Flex>
</Text>
<Text as="label" size="2">
<Flex gap="2">
<CheckboxGroup.Item value="2" /> Compact
</Flex>
</Text>
</CheckboxGroup.Root>
<CheckboxGroup.Root size="2" defaultValue="1">
<Text as="label" size="3">
<Flex gap="2">
<CheckboxGroup.Item value="1" /> Default
</Flex>
</Text>
<Text as="label" size="3">
<Flex gap="2">
<CheckboxGroup.Item value="2" /> Compact
</Flex>
</Text>
</CheckboxGroup.Root>
<CheckboxGroup.Root size="3" defaultValue="1">
<Text as="label" size="4">
<Flex gap="2">
<CheckboxGroup.Item value="1" /> Default
</Flex>
</Text>
<Text as="label" size="4">
<Flex gap="2">
<CheckboxGroup.Item value="2" /> Compact
</Flex>
</Text>
</CheckboxGroup.Root>
</Flex>
它也会与多行文本自动对齐。
使用原生的 disabled 属性创建禁用的复选框。
<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>
Off
</CheckboxGroup.Item>
<CheckboxGroup.Item value="2" disabled>
On
</CheckboxGroup.Item>
</CheckboxGroup.Root>
</Flex>