一组可以同时选择多个选项的互动卡片。
<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>
此组件基于 div 元素，并支持 常见的边距属性。
| 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 属性来控制尺寸。
<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 属性来控制视觉风格。
<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 属性来指定特定的 颜色。
<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 属性来增加与背景的颜色对比。
<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>
<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>