Checkbox

A control that allows the user to toggle between checked, unchecked and indeterminate states.

$bunx shadcn@latest add @nx-ui/checkbox

Pair a Checkbox with a Label using a matching id. Clicking the label toggles the control.

Unchecked

Checked

Drive `checked` yourself for a controlled checkbox, or set `indeterminate` for a parent covering a mixed selection of children.

Disabled dims and blocks interaction; aria-invalid draws the destructive ring for validation errors.

Disabled

Disabled, checked

Read-only

Invalid

When a checkbox is locked, keep the row readable and say why — pair the disabled control with a FieldDescription carrying the reason.

Ashdown Transfer Station intake

Locked until the compliance audit completes — expected back online on Friday.

Tipping permit confirmed

Verified by the depot office; only an administrator can withdraw a confirmed permit.

aria-invalid draws the destructive ring, and a FieldError explains what is missing. Tick the box to clear the error.

I confirm the load matches the transfer note

Required under duty-of-care rules before any movement leaves site.

Confirm the load details before dispatching the movement.

API reference

Exported parts and their props, extracted from the component source.

…extends CheckboxPrimitive.Root.Props