Native checkbox with optional label and description, including indeterminate.
Also known as: tick box, indeterminate checkbox
Install with the CLI, or copy the component source into your project.
Add checkbox (npm)
1npx --yes -p @default-file/ui df-ui add checkbox
Labeled checkbox in the checked state.
Visible label with supporting text. Description is wired as aria-describedby on the input.
Parent mixed state when some child items are selected. Clicks commit true or false; the parent sets indeterminate.
Control sizes sm and md. Default is md.
Non-interactive off and on states.
Invalid chrome with aria-invalid on the input.
Native checkbox with optional label and description, supporting checked, unchecked, and indeterminate.
| Prop | Type | Default | Notes |
|---|---|---|---|
| checked | boolean | "indeterminate" | - | Controlled state. Pass "indeterminate" for the mixed visual and aria-checked="mixed". |
| defaultChecked | boolean | false | Uncontrolled initial checked state. |
| onCheckedChange | (checked: boolean | "indeterminate") => void | - | Called when the user toggles. Interaction always commits true or false; indeterminate is set from the parent. |
| size | "sm" | "md" | "md" | Control size. |
| invalid | boolean | false | Marks the control invalid and sets aria-invalid. |
| label | ReactNode | - | Visible label. When set (or description is set), the control wraps in a label element bound with htmlFor. |
| description | ReactNode | - | Supporting text under the label. Wired as aria-describedby on the input. |
| disabled | boolean | - | Disables the input. |
| id | string | - | Input id. Generated when omitted. |
| name | string | - | Form name on the input. |
| value | string | - | Form value on the input. |
| required | boolean | - | Native required on the input. |
| className | string | - | Additional styles on the field wrapper when label or description is set, otherwise on the control root. |
Pass label for a visible name, or supply aria-label or aria-labelledby on the input when rendering the control alone. Also accepts other native input attributes except type, size, checked, defaultChecked, and onChange; use onCheckedChange for selection changes.