Checkbox

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

tsx

1import { Checkbox } from "@yuhuanowo/yunui";

Usage

Checkbox is controlled — wire it to state:

tsx

1const [checked, setChecked] = useState(false);
2<label className="flex items-center gap-2">
3  <Checkbox checked={checked} onCheckedChange={setChecked} id="terms" aria-label="Accept terms" />
4  Accept terms
5</label>

Example

Checkbox rows

Subscribe to updatesRemember this deviceDisabled option

Checkbox renders a <button role="checkbox">. A <label> — wrapping it, or via htmlFor — does not name it: labels only apply to real form controls. Use aria-label, or point aria-labelledby at the text beside it.

tsx

1<span className="flex items-center gap-2 text-sm">
2  <Checkbox checked={checked} onCheckedChange={setChecked} aria-labelledby="terms-label" />
3  <span id="terms-label">I accept the terms</span>
4</span>

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. NOTE: this renders a `<button role="checkbox">`, and `<label>` — whether wrapping or via `htmlFor` — only names real form controls. It does nothing for a button. Name it with `aria-label`, or point `aria-labelledby` at the text beside it.
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).

Import

Usage

Example

Naming it

Props

On this page