Checkbox Group

A group of checkboxes that allows multiple selections with support for validation and accessibility.

Select your favorite tricks

KickflipHeelflipTre Flip540 Flip

Installation

pnpm add @diceui/checkbox-group

Installation with shadcn/ui

pnpm dlx shadcn@latest add @diceui/checkbox-group

Layout

Import the parts, and compose them together.

import {
  CheckboxGroup,
  CheckboxGroupLabel,
  CheckboxGroupList,
  CheckboxGroupItem,
  CheckboxGroupIndicator,
  CheckboxGroupDescription,
} from "@diceui/checkbox-group";
 
return (
  <CheckboxGroup>
    <CheckboxGroupLabel />
    <CheckboxGroupList>
      <CheckboxGroupItem>
        <CheckboxGroupIndicator />
      </CheckboxGroupItem>
    </CheckboxGroupList>
    <CheckboxGroupDescription>
  </CheckboxGroup>
)

Animated Checkbox

Update tailwind.config.ts to include the following animation:

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

Copy and paste the CheckboxGroupIndicator block from the following example into your project.

KickflipHeelflip

Examples

Horizontal Orientation

Tricks

IndyStalefishPizza GuyFS 540

Select grab tricks

With Validation

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

Tricks

IndyStalefishFS 540

Select grab tricks

Multi Selection

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

API Reference

CheckboxGroup

Container for the checkbox group.

Prop

Type

Data Attribute	Value
`[data-invalid]`	Present when invalid.
`[data-disabled]`	Present when disabled.
`[data-orientation]`	`"vertical" \| "horizontal"`

CheckboxGroupLabel

Label for the checkbox group.

Prop

Type

Data Attribute	Value
`[data-disabled]`	Present when disabled.

CheckboxGroupList

Container for checkbox items.

Prop

Type

Data Attribute	Value
`[data-orientation]`	`"vertical" \| "horizontal"`
`[data-invalid]`	Present when invalid.

CheckboxGroupItem

Individual checkbox item.

Prop

Type

Data Attribute	Value
`[data-state]`	`"checked" \| "unchecked"`
`[data-disabled]`	Present when disabled.
`[data-invalid]`	Present when invalid.
`[data-orientation]`	`"vertical" \| "horizontal"`

CheckboxGroupIndicator

Visual indicator for the checkbox state.

Prop

Type

Data Attribute	Value
`[data-state]`	`"checked" \| "unchecked"`
`[data-disabled]`	Present when disabled.

CheckboxGroupDescription

Optional description text for the checkbox group.

Prop

Type

Data Attribute	Value
`[data-disabled]`	Present when disabled.
`[data-invalid]`	Present when invalid.

CheckboxGroupMessage

Error or validation message for the checkbox group.

Prop

Type

Data Attribute	Value
`[data-disabled]`	Present when disabled.
`[data-invalid]`	Present when invalid.

Accessibility

Keyboard Interactions

Key	Description
`Space`	Toggles checkbox item.

Badge Overflow

A component that intelligently manages badge overflow by measuring available space and displaying only what fits with an overflow indicator.

Circular Progress

A circular progress indicator that displays completion progress in a ring format with support for indeterminate states.

Checkbox Group

On this page