Checkbox is Ant Design's Checkbox, installed into your project as a file you own. It takes the same props and forwards a ref. Checkbox.Group keeps its value type, so Checkbox.Group<Fruit> narrows options, value and onChange.
Install
npx antuikit@latest init
npx antuikit@latest add checkbox
The first command installs AntuikitProvider and the theme tokens. The second adds this component.
Import
Import from @/components/ui/checkbox, not from antd. The file lives in your project once installed.
import { Checkbox } from "@/components/ui/checkbox"
The axes
Checkbox has no props with named values. What changes is the value you pass.
Flags
Seven booleans, all false by default.
defaultChecked starts an uncontrolled box checked. It is ignored once checked is passed.
checked makes the box controlled. Without onChange it freezes, and looks broken rather than disabled.
disabled on the box wins over the group's, which wins over a Form or ConfigProvider.
autoFocus focuses the input on mount, which moves the reader's place on the page.
skipGroup leaves a box inside a Checkbox.Group out of the group's value, with its own checked state and name.
required is the native input attribute. Form validation comes from rules on the Form.Item.
indeterminate only changes the look. checked still decides the value, and the prop exists on Checkbox, not on the group.
Slots
children is the label. It sits inside the same <label> as the input, so it is both the click target and the accessible name. Pass nothing and the box has no name.
In a Checkbox.Group, each option's label takes any node too. Use options or children, not both: when options is set, children are not rendered.
Events
onChange
onClick
onMouseEnter
onMouseLeave
onKeyPress
onKeyDown
onFocus
onBlur
Styling
classNames and styles take the same keys, one per part. Use them before a descendant selector.
1
<Checkbox
2
classNames={{
3
root: "…",
4
icon: "…",
5
label: "…",
6
}}
7
/>
A Tailwind class on one of these keys wins over the default styles without !important. Setting a component token's CSS variable on the root has no effect, so set the token in your theme or style the part.
API Reference
Checkbox
Checkbox's props. Rows marked antuikit in the Version column are added by the kit.
Checkbox.Group
Checkbox.Group's props. Rows marked antuikit in the Version column are added by the kit.