Forms & Inputs
Checkbox
Controlled checkbox, pairs with a label for an accessible row.
A controlled checkbox. It's controlled-only: pass checked and onCheckedChange. Pair it with a <label htmlFor> (via the id prop) for an accessible, click-to-toggle row.
Import
import { Checkbox } from "@yuhuanowo/yunui";
Usage
Checkbox is controlled — wire it to state:
const [checked, setChecked] = useState(false);
<label className="flex items-center gap-2">
<Checkbox checked={checked} onCheckedChange={setChecked} id="terms" />
Accept terms
</label>
Example
Checkbox rows
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| checked | boolean | "indeterminate" | false | Whether the box is checked. `"indeterminate"` shows a dash — for a select-all that's only partially selected. Defaults to `false`. |
| className | string | — | |
| disabled | boolean | false | Disable interaction and dim the control. |
| id | string | — | Element id (e.g. to pair with a `<label htmlFor>`). |
| onCheckedChange | ((checked: boolean) => void) | — | Called with the next checked state when toggled (indeterminate → checked). Optional — omit for a read-only/display checkbox (it won't toggle). |