Checkbox
Checkbox lets people select one or more independent options from a set.
Supports an indeterminate state for a “select all” checkbox when only some of the child items are selected.
Import
Install from npm, copy the source into your project with @yugen-ui/cli or the shadcn CLI, or import directly when working in this repo.
TSX
// npm install yugen-uiimport { Checkbox } from "yugen-ui";Variants
Each tile is a standalone example: hover to copy, or press Code to see the source.
States
unchecked, checked, indeterminate, disabled.
Size & label position
medium (16px), large (20px); label before or after.
Usage
Do
- Stack checkbox lists vertically.
- Write the label to describe the checked state.
Don't
- Don't use Checkbox for changes that take effect immediately. Use Switch.
- Don't use it for mutually exclusive options. Use RadioGroup.
Props
| Prop · Type | Default | Description |
|---|---|---|
| labelReactNode | Default: — | Clickable label. |
| checked / defaultCheckedboolean | "indeterminate" | Default: — | Controlled / uncontrolled. |
| onCheckedChange(checked: boolean) => void | Default: — | Called when the value changes (a click or Space always gives a boolean). |
| name / value / required / formstring / string / boolean / string | Default: — | Attributes of the native <input>: the value goes with the form, FormData and autofill. ref points to HTMLInputElement (type="checkbox"). |
| size"medium" | "large" | Default: "medium" | Box size 16 / 20px. |
| labelPosition"after" | "before" | Default: "after" | Label position. |