Checkbox

Accept terms and conditions

Installation

npx asteria-ui add checkbox

import { Checkbox } from "@/components/ui/checkbox";

<Checkbox label="Accept terms and conditions" />

Unchecked

Checked

Indeterminate

Disabled

Prop	Type	Default	Description
label	ReactNode	—	Clickable label, linked to the control via for/id.
checked	boolean \| "indeterminate"	—	Controlled checked state.
defaultChecked	boolean \| "indeterminate"	—	Uncontrolled initial checked state.
onCheckedChange	(checked: boolean \| "indeterminate") => void	—	Called when the checkbox is toggled.
disabled	boolean	—	Prevents toggling.

Role. role="checkbox" with aria-checked reflecting true / false / mixed — provided by Radix.
Keyboard. Space toggles. Radix already handles focus and keyboard behavior; no manual ARIA wiring needed on top of it.
Label. Clicking the label toggles the checkbox (linked via a generated id/htmlFor).
Focus. Visible glow-focus ring on the box itself.