Forms

Checkbox

A tri-state checkbox with label support and visible focus.

StableUsed in Aback Tools, Aback LaunchRegistry JSON

Email notifications

Product updates

New components and releases.

Security alerts

Sign-ins and permission changes.

Billing receipts

Invoices and payment confirmations.

Installation

Copy the source with the CLI to own and edit it, or import it from the npm package.

npx aback-ui@latest add checkbox

Writes components/ui/checkbox.tsx. First time in this project? Run npx aback-ui@latest init first, as the installation guide shows.

Import the parts you need from the installed file. The Code tab above has a complete, working example.

tsx

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

Props and composition points for Checkbox. Native element props pass through.

Prop	Type	Default	Description
`checked`	`boolean \| "indeterminate"`	None	Controlled state. Use defaultChecked for uncontrolled usage.
`onCheckedChange`	`(checked: boolean \| "indeterminate") => void`	None	Fires when the user toggles the control.
`disabled`	`boolean`	None	Prevents interaction and reduces opacity.
`name / value / required`	`string / string / boolean`	None	Native form integration through a hidden input managed by Radix.

Dependencies: radix-ui, @tabler/icons-react, plus the shared @/lib/utils helper.

Semantics, keyboard behavior, and the decisions that keep the component operable.

Radix exposes role checkbox, aria-checked, and keyboard support. Space toggles the value.
Associate a visible Label with htmlFor; clicking the label toggles the box.
Indeterminate is announced as mixed. Use it for a parent selection, not for a third user state.
Focus is visible on the box itself, so the control must not be wrapped in an overflow-hidden label.

Key	Action
`Space`	Toggle the checkbox.
`Tab`	Move focus into or out of the control.

The Aback products whose interfaces shaped this component.