# antuikit / Checkbox

> Checkbox with `Checkbox.Group` attached. Adds an `orientation` (and `vertical`) prop to the group that stacks its options.

Docs: https://antuikit.com/docs/components/checkbox

## Install

npx antuikit@latest init
npx antuikit@latest add checkbox

## Import

import { Checkbox } from "@/components/ui/checkbox";

## Demos

- [Basic](https://ui.antuikit.com/embed/checkbox/basic.md): A `Checkbox` is checked, unchecked or, with `indeterminate`, partly checked, like a select-all box with some items picked.
- [Disabled](https://ui.antuikit.com/embed/checkbox/disabled.md): Set `disabled` to lock a checkbox in its current state, whether checked, unchecked or indeterminate.
- [Controlled](https://ui.antuikit.com/embed/checkbox/controlled.md): Pass `checked` and `onChange` to drive the checkbox from state, here checked and disabled by the buttons below it.
- [Group](https://ui.antuikit.com/embed/checkbox/group.md): Pass `Checkbox.Group` a list of `options`, and set `disabled` on any option that cannot be picked.
- [Vertical](https://ui.antuikit.com/embed/checkbox/vertical.md): Set `orientation="vertical"`, or the `vertical` shorthand, to stack a group's options in a column.
- [Check all](https://ui.antuikit.com/embed/checkbox/check-all.md): Set `indeterminate` on a select-all box while only part of the group is checked, and check or clear the whole group from it.
- [Group in a grid](https://ui.antuikit.com/embed/checkbox/group-grid.md): Put checkboxes with a `value` anywhere inside `Checkbox.Group`, here laid out in a three-column grid.
- [With description](https://ui.antuikit.com/embed/checkbox/with-description.md): Pass a title and a line of help text as the label, with the box aligned to the first line.
- [Card options](https://ui.antuikit.com/embed/checkbox/card-group.md): Wrap each checkbox of a group in a card to make large options with a title and a description.
- [Nested groups](https://ui.antuikit.com/embed/checkbox/nested-group.md): For nested checkboxes, use a `checkable` Tree, which checks each parent when all its children are and marks it `indeterminate` when some are.
- [In a form](https://ui.antuikit.com/embed/checkbox/in-form.md): Use `Checkbox.Group` as a form field, and set `valuePropName="checked"` for a single checkbox like accepting the terms.

## Rules

- antuikit components are COPIED into a project from a registry. There is no
  `antuikit` package to import components from at runtime.
- Import from `@/components/ui/checkbox`, never from `antd`. antd stays for
  `theme`, `App`, the `message` / `notification` statics and type-only imports.
- Do not nest a bare `<ConfigProvider theme>` to re-theme a region. Use
  `<ThemeScope theme={...}>`, which also carries the cssVar key class that
  non-antd descendants inherit their tokens from.
- Colors, radii and spacing come from the token contract, not from hardcoded
  values: write `rounded-lg`, `px-xxs`, `bg-warning`, not the raw `var(--ant-*)`.
- `Checkbox` takes every Ant Design v6 prop of the same component. The
  wrapper never narrows that surface, so anything antd documents also works here.