Loading…

Checkbox

A control for an on/off choice, with support for an indeterminate state.

Forms
1 file
1 npm package
Accessibility notes

Playground

Accept terms and conditions

Installation

One command and the file is in your project, or copy it in by hand.

$pnpm dlx @dowel-ui/cli add checkbox

npm packages installed: radix-ui.

Usage

Imported from your own path — the file is yours, so this is an import like any other.

app/page.tsxTSX

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

Examples

Every example the tests run, live and operable, side by side.

Default
With Description
States
Select All
Invalid
Drawn Check

API

Generated from the component's own types, so a prop cannot appear here without existing.

<Checkbox>

Every prop of Radix UI’s Checkbox.Root, plus className.

Accessibility

Toggles with Space, matching the native control. Always pair with a Label via htmlFor/id — the box alone has no accessible name. Indeterminate is announced as "mixed" and is a state the application sets, not one the user can reach by clicking.

Quality

Measured from the source and its tests at build time.

All scores

8/8

checks passed

Tested — passes
axe assertion — passes
Keyboard tested — does not apply
Storybook examples — passes
Accessibility documented — passes
Semantic tokens only — passes
Motion from tokens — passes
className merged — passes
Visible focus — does not apply
No fixed widths — passes

Used in

Whole screens assembled from this component. Installing one brings this and everything else it needs with it.