# Checkbox

A checkbox and checkbox group whose check draws itself on, morphs into a dash for a partly ticked select-all, and supports shift-click to tick a whole range at once.

- Page and source: https://uibrik.com/components/checkbox
- Install: `npx shadcn@latest add https://uibrik.com/r/checkbox.json`
- Packages (installed by the CLI): motion
- Import: `import { CheckboxGroup } from "@/components/uibrik/checkbox/checkbox"`

Where to use the Checkbox React component:

- **Forms and settings**: A check that draws itself on gives clear, satisfying feedback. Pairs with [Radio Group](https://uibrik.com/components/radio-group).
- **Table row selection**: A dash for partly ticked select-all and shift-click range select suit tables. Pairs with [Data Table](https://uibrik.com/components/data-table).
- **Terms and consent**: An accessible, clear checkbox fits legal agreements. Pairs with [Cookie Consent](https://uibrik.com/components/cookie-consent).

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| size | `"sm" \| "md" \| "lg"` | `"md"` | Box and text size. |
| rangeSelect | `boolean` | `true` | Shift-click ticks every box between the last click and this one. |
| duration | `number` | `0.25` | How long the check takes to draw. |
| disabled | `boolean` | `false` | Grey the group out and ignore clicks. |
| options | `(string \| { value; label; description?; disabled? })[]` |  | Boxes in order. |
| value / onChange | `string[] / (value) => void` |  | Controlled ticked values, in the options' order. |
| defaultValue | `string[]` |  | Ticked values on mount when uncontrolled. |
| selectAll | `ReactNode` |  | Label for a parent box that ticks them all and goes indeterminate when only some are ticked. |
| name | `string` |  | Submits each ticked value under this name with a surrounding form. |
| label | `string` |  | Names the group for screen readers. |
| className | `string` |  | Classes for the group. |
| Checkbox | `component` |  | A single box: checked / defaultChecked / onCheckedChange (true, false or "indeterminate"), label, description, size, disabled, name. |