Checkbox

An accessible checkbox component with label, description, indeterminate state, and group support.

Overview

The Checkbox component is an accessible checkbox built on Radix UI. It supports labels, descriptions, indeterminate state, error styling, two sizes, and group composition with vertical or horizontal orientation.

Installation

Install the component via the CLI in one command.

npx @work-rjkashyap/unified-ui add checkbox

pnpm dlx @work-rjkashyap/unified-ui add checkbox

npx @work-rjkashyap/unified-ui add checkbox

bunx @work-rjkashyap/unified-ui add checkbox

If you haven't initialized your project yet, run npx @work-rjkashyap/unified-ui init first. See the CLI docs for details.

Or install the full package

Use this approach if you prefer to install the entire design system as a dependency instead of copying individual components.

npm install @work-rjkashyap/unified-ui

pnpm add @work-rjkashyap/unified-ui

yarn add @work-rjkashyap/unified-ui

bun add @work-rjkashyap/unified-ui

Anatomy

import {
	Checkbox,
	CheckboxGroup,
} from "@work-rjkashyap/unified-ui";

Examples

Basic Usage

Accept terms and conditions

Send me email notifications

Remember me

<Checkbox label="Accept terms and conditions" />
<Checkbox label="Send me email notifications" defaultChecked />
<Checkbox label="Remember me" />

<Checkbox label="Accept terms and conditions" /><Checkbox label="Send me email notifications" defaultChecked /><Checkbox label="Remember me" />

Sizes

Small checkbox

Small checked

Medium checkbox (default)

Medium checked

{/* Small */}
<Checkbox size="sm" label="Small checkbox" />
<Checkbox size="sm" label="Small checked" defaultChecked />

{/* Medium (default) */}

<Checkbox size="md" label="Medium checkbox (default)" />
<Checkbox size="md" label="Medium checked" defaultChecked />

{/* Small */}<Checkbox size="sm" label="Small checkbox" /><Checkbox size="sm" label="Small checked" defaultChecked />{/* Medium (default) */}<Checkbox size="md" label="Medium checkbox (default)" /><Checkbox size="md" label="Medium checked" defaultChecked />

With Description

Marketing emails

Security alerts

Usage analytics

<Checkbox
label="Marketing emails"
/>
<Checkbox
label="Security alerts"
defaultChecked
/>
<Checkbox
label="Usage analytics"
/>

<Checkboxlabel="Marketing emails"/><Checkboxlabel="Security alerts"defaultChecked/><Checkboxlabel="Usage analytics"/>

Indeterminate State

Select all items

Item one

Item two

Item three

<Checkbox checked="indeterminate" label="Select all items" />

{/* Child checkboxes */}

<Checkbox size="sm" label="Item one" defaultChecked />
<Checkbox size="sm" label="Item two" defaultChecked />
<Checkbox size="sm" label="Item three" />

<Checkbox checked="indeterminate" label="Select all items" />{/* Child checkboxes */}<Checkbox size="sm" label="Item one" defaultChecked /><Checkbox size="sm" label="Item two" defaultChecked /><Checkbox size="sm" label="Item three" />

Disabled State

Disabled unchecked

Disabled checked

Disabled indeterminate

<Checkbox disabled label="Disabled unchecked" />
<Checkbox disabled defaultChecked label="Disabled checked" />
<Checkbox disabled checked="indeterminate" label="Disabled indeterminate" />

<Checkbox disabled label="Disabled unchecked" /><Checkbox disabled defaultChecked label="Disabled checked" /><Checkbox disabled checked="indeterminate" label="Disabled indeterminate" />

Error State

I accept the terms and conditions

You must accept the terms to continue.

<Checkbox
error
label="I accept the terms and conditions"
aria-describedby="terms-error"
/>
<p id="terms-error" className="text-xs text-danger ml-6">
You must accept the terms to continue.
</p>

<Checkboxerrorlabel="I accept the terms and conditions"aria-describedby="terms-error"/><p id="terms-error" className="text-xs text-danger ml-6">You must accept the terms to continue.</p>

Checkbox Group — Vertical

Notifications

SMS

Push notifications

<CheckboxGroup label="Notifications">
<Checkbox value="email" label="Email" />
<Checkbox value="sms" label="SMS" />
<Checkbox value="push" label="Push notifications" />
</CheckboxGroup>

<CheckboxGroup label="Notifications"><Checkbox value="email" label="Email" /><Checkbox value="sms" label="SMS" /><Checkbox value="push" label="Push notifications" /></CheckboxGroup>

Checkbox Group — Horizontal

Interests

Design

Engineering

Product

<CheckboxGroup label="Interests" orientation="horizontal">
<Checkbox value="design" label="Design" />
<Checkbox value="engineering" label="Engineering" />
<Checkbox value="product" label="Product" />
</CheckboxGroup>

<CheckboxGroup label="Interests" orientation="horizontal"><Checkbox value="design" label="Design" /><Checkbox value="engineering" label="Engineering" /><Checkbox value="product" label="Product" /></CheckboxGroup>

Checkbox Group — With Description

Privacy settings

Analytics

Crash reports

Personalization

<CheckboxGroup
label="Privacy settings"
>
<Checkbox
  value="analytics"
  label="Analytics"
/>
<Checkbox
  value="crashes"
  label="Crash reports"
/>
<Checkbox
  value="personalization"
  label="Personalization"
/>
</CheckboxGroup>

<CheckboxGrouplabel="Privacy settings"><Checkbox  value="analytics"  label="Analytics"/><Checkbox  value="crashes"  label="Crash reports"/><Checkbox  value="personalization"  label="Personalization"/></CheckboxGroup>

Combined Features

Account preferences

Two-factor authentication

Active sessions

Marketing communications

I agree to the privacy policy

Required to create an account.

<CheckboxGroup label="Account preferences">
<Checkbox
  value="2fa"
  label="Two-factor authentication"
  defaultChecked
/>
<Checkbox
  value="sessions"
  label="Active sessions"
  defaultChecked
/>
<Checkbox
  value="marketing"
  label="Marketing communications"
/>
</CheckboxGroup>

{/* Standalone with error */}

<Checkbox error label="I agree to the privacy policy" size="sm" />
<p className="text-xs text-danger ml-5">Required to create an account.</p>

<CheckboxGroup label="Account preferences"><Checkbox  value="2fa"  label="Two-factor authentication"  defaultChecked/><Checkbox  value="sessions"  label="Active sessions"  defaultChecked/><Checkbox  value="marketing"  label="Marketing communications"/></CheckboxGroup>{/* Standalone with error */}<Checkbox error label="I agree to the privacy policy" size="sm" /><p className="text-xs text-danger ml-5">Required to create an account.</p>

Props

Prop	Type	Default	Description
`checked`	`boolean \| "indeterminate"`	—	Controlled checked state.
`defaultChecked`	`boolean`	`false`	Initial checked state (uncontrolled).
`onCheckedChange`	`(checked: boolean \| "indeterminate") => void`	—	Callback when checked state changes.
`size`	`"sm" \| "md"`	`"md"`	Size of the checkbox.
`label`	`ReactNode`	—	Clickable label text.
`description`	`ReactNode`	—	Description text below the label.
`value`	`string`	—	Value used when inside a CheckboxGroup.
`error`	`boolean`	`false`	Whether to show error styling.
`disabled`	`boolean`	`false`	Whether the checkbox is disabled.
`className`	`string`	—	Additional CSS classes.

CheckboxGroup

Prop	Type	Default	Description
`label`	`ReactNode`	—	Group label displayed above the checkboxes.
`description`	`ReactNode`	—	Description text below the group label.
`orientation`	`"vertical" \| "horizontal"`	`"vertical"`	Layout direction of the checkboxes.
`size`	`"sm" \| "md"`	`"md"`	Size applied to all child checkboxes.
`error`	`boolean`	`false`	Whether to show error styling on all children.
`disabled`	`boolean`	`false`	Whether all children are disabled.
`className`	`string`	—	Additional CSS classes.

Accessibility

Built on @radix-ui/react-checkbox which provides full keyboard and screen reader support out of the box.

Keyboard — Space toggles the checkbox. Tab moves focus between checkboxes.
Focus ring — Visible on keyboard navigation via focus-visible.
Label — Clicking the label text toggles the checkbox (integrated <label> element).
Indeterminate — Properly exposed via aria-checked="mixed".
Group — CheckboxGroup uses role="group" with aria-labelledby for the group label.
Disabled — Sets both the disabled attribute and aria-disabled.
Error — The error prop applies visual styling. Pair with aria-describedby and an error message element for screen reader support.

Design Tokens

Token	Usage
`--primary`	Checked state background
`--primary-foreground`	Checkmark icon color
`--danger`	Error state border
`--radius-sm`	Checkbox border radius
`--duration-fast`	Transition speed

Checkbox

On this page