Set of interactive buttons where multiple options can be selected at a time.
<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>
This component is based on the div element and supports common margin props.
Contains all the parts of a checkbox group.
| 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 |
An item in the group that can be checked.
Use the size prop to control the checkbox 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>
Use the variant prop to control the visual style of the checkboxes.
<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>
Use the color prop to assign a specific 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>
Use the highContrast prop to increase color contrast with the background.
<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>
Composing CheckboxGroup.Item within Text automatically centers it with the first line of 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>
It is automatically well-aligned with multi-line text too.
Use the native disabled attribute to create a disabled checkbox.
<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>