║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║

---

title: Checkbox Group description: A group of checkboxes that allows multiple selections with support for validation and accessibility. preview: true links: api: /docs/components/checkbox-group#api-reference

<ComponentTabs name="checkbox-group-demo" />

Installation

@diceui/checkbox-group

Installation with shadcn/ui

CLI

npx shadcn@latest add "https://diceui.com/r/checkbox-group"

Manual

<Steps> <Step> Install the following dependencies:

 ```package-install
 @diceui/checkbox-group
 ```

</Step> <Step> Copy and paste the following code into your project.

<ComponentSource name="checkbox-group" />

</Step> </Steps>

Layout

Import the parts, and compose them together.

import * as CheckboxGroup from "@diceui/checkbox-group";

<CheckboxGroup.Root>
  <CheckboxGroup.Label />
  <CheckboxGroup.List>
    <CheckboxGroup.Item>
      <CheckboxGroup.Indicator />
    </CheckboxGroup.Item>
  </CheckboxGroup.List>
  <CheckboxGroup.Description>
</CheckboxGroup.Root>

Animated Checkbox

<Steps> <Step> Update `tailwind.config.ts` to include the following animation:

```ts
export default {
  theme: {
    extend: {
      keyframes: {
        "stroke-dashoffset": {
          "0%": { strokeDashoffset: "100%" },
          "100%": { strokeDashoffset: "0" },
        },
      },
      animation: {
        "stroke-dashoffset": "stroke-dashoffset 0.2s linear forwards",
      },
    },
  },
}
```

</Step> <Step> Copy and paste the `CheckboxGroup.Indicator` block from the following example into your project.

<ComponentTabs name="checkbox-group-animated-demo" />

</Step> </Steps>

Examples

Horizontal Orientation

<ComponentTabs name="checkbox-group-horizontal-demo" />

With Validation

Validate the group with onValidate or required prop. Can be used for native form validation.

<ComponentTabs name="checkbox-group-validation-demo" />

Multi Selection

Hold down the Shift key to select and deselect multiple checkboxes at once.

<ComponentTabs name="checkbox-group-multi-selection-demo" preventPreviewFocus />

API Reference

Root

Container for the checkbox group.

<AutoTypeTable path="./types/docs/checkbox-group.ts" name="RootProps" />

<DataAttributesTable attributes={[ { title: "[data-invalid]", value: "Present when invalid.", }, { title: "[data-disabled]", value: "Present when disabled.", }, { title: "[data-orientation]", value: ["vertical", "horizontal"], }, ]} />

Label

Label for the checkbox group.

<AutoTypeTable path="./types/docs/checkbox-group.ts" name="LabelProps" />

<DataAttributesTable attributes={[ { title: "[data-disabled]", value: "Present when disabled.", }, ]} />

List

Container for checkbox items.

<AutoTypeTable path="./types/docs/checkbox-group.ts" name="ListProps" />

<DataAttributesTable attributes={[ { title: "[data-orientation]", value: ["vertical", "horizontal"], }, { title: "[data-invalid]", value: "Present when invalid.", }, ]} />

Item

Individual checkbox item.

<AutoTypeTable path="./types/docs/checkbox-group.ts" name="ItemProps" />

<DataAttributesTable attributes={[ { title: "[data-state]", value: ["checked", "unchecked"], }, { title: "[data-disabled]", value: "Present when disabled.", }, { title: "[data-invalid]", value: "Present when invalid.", }, { title: "[data-orientation]", value: ["vertical", "horizontal"], }, ]} />

Indicator

Visual indicator for the checkbox state.

<AutoTypeTable path="./types/docs/checkbox-group.ts" name="IndicatorProps" />

<DataAttributesTable attributes={[ { title: "[data-state]", value: ["checked", "unchecked"], }, { title: "[data-disabled]", value: "Present when disabled.", }, ]} />

Description

Optional description text for the checkbox group.

<AutoTypeTable path="./types/docs/checkbox-group.ts" name="DescriptionProps" />

<DataAttributesTable attributes={[ { title: "[data-disabled]", value: "Present when disabled.", }, { title: "[data-invalid]", value: "Present when invalid.", }, ]} />

Message

Error or validation message for the checkbox group.

<AutoTypeTable path="./types/docs/checkbox-group.ts" name="MessageProps" />

<DataAttributesTable attributes={[ { title: "[data-disabled]", value: "Present when disabled.", }, { title: "[data-invalid]", value: "Present when invalid.", }, ]} />

Accessibility

Keyboard Interactions

<KeyboardShortcutsTable shortcuts={[ { keys: ["Space"], description: "Toggles checkbox item." }, ]} />

║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║