# Checkbox Group

Set of interactive buttons where multiple options can be selected at a time.

```jsx
<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>
```

## [API Reference](#api-reference)

This component is based on the `div` element and supports [common margin props](/themes/docs/overview/layout#margin-props).

### [Root](#root)

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 |

### [Item](#item)

An item in the group that can be checked.

## [Examples](#examples)

### [Size](#size)

Use the `size` prop to control the checkbox size.

```jsx
<Flex align="center" gap="2">
  <CheckboxGroup.Root size="1" defaultValue={["1"]}>
    <CheckboxGroup.Item value="1" />
  </CheckboxGroup.Root>

  <CheckboxGroup.Root size="2" defaultValue={["2"]}>
    <CheckboxGroup.Item value="2" />
  </CheckboxGroup.Root>

  <CheckboxGroup.Root size="3" defaultValue={["3"]}>
    <CheckboxGroup.Item value="3" />
  </CheckboxGroup.Root>
</Flex>
```

### [Variant](#variant)

Use the `variant` prop to control the visual style of the checkboxes.

```jsx
<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](#color)

Use the `color` prop to assign a specific [color](/themes/docs/theme/color).

```jsx
<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>
```

### [High-contrast](#high-contrast)

Use the `highContrast` prop to increase color contrast with the background.

```jsx
<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>
```

### [Alignment](#alignment)

Composing `CheckboxGroup.Item` within `Text` automatically centers it with the first line of text.

```jsx
<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.

### [Disabled](#disabled)

Use the native `disabled` attribute to create a disabled checkbox.

```jsx
<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>
```

<!--$-->

<!--/$-->