Checkbox
A control that lets the user toggle between checked and not checked.
Installation
npx shadcn@latest add @uqudo/checkboxUsage
import { Checkbox } from "@/components/uqudo/ui/checkbox"<Checkbox id="terms" />
<Label htmlFor="terms">Accept terms and conditions</Label>It is the Radix Checkbox with the design-system styles applied, so use
checked / onCheckedChange for a controlled checkbox and defaultChecked for
an uncontrolled one. Pass checked="indeterminate" for the mixed state.
Examples
With text
Pair it with a Label and a short description.
By clicking this checkbox, you agree to the terms and conditions.
Disabled
API Reference
Checkbox
Prop
Type
Data attributes
| Attribute | Element | Value |
|---|---|---|
data-slot | root | Always checkbox. |
data-slot | indicator | Always checkbox-indicator. |
data-state | root | checked, unchecked or indeterminate. |