Components

Checkbox

A checkbox component built on Radix UI with density-aware sizing, checked state styling, and accessible labeling.

Preview

Installation

npx blackboard-ui@latest add checkbox

Usage

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

export default function Example() {
  return <Checkbox />;
}

Examples

Sizes

Use the size prop to control the checkbox dimensions.

Small

Default

Large

<Checkbox size="sm" />
<Checkbox />
<Checkbox size="lg" />

With Label & Description

Pair with Field using orientation="horizontal" for inline checkbox + label layouts.

Accept terms and conditions

You agree to our Terms of Service and Privacy Policy.

<Field orientation="horizontal" className="items-start">
  <Checkbox id="terms" className="mt-0.5" />
  <div className="flex flex-col gap-1">
    <FieldLabel htmlFor="terms" className="font-normal">
      Accept terms and conditions
    </FieldLabel>
    <FieldDescription>
      You agree to our Terms of Service and Privacy Policy.
    </FieldDescription>
  </div>
</Field>

Disabled

Use the disabled prop to disable the checkbox. Wrap with data-disabled on the Field for cascading opacity.

This option is unavailable

<Field orientation="horizontal" data-disabled>
  <Checkbox id="disabled" disabled />
  <FieldLabel htmlFor="disabled" className="font-normal">
    This option is unavailable
  </FieldLabel>
</Field>

API Reference

Checkbox

Prop	Type	Default
size	"default" \| "sm" \| "lg"	"default"
checked	boolean \| "indeterminate"	—
defaultChecked	boolean	false
onCheckedChange	(checked: boolean \| "indeterminate") => void	—
disabled	boolean	false
className	string	—

Built on @radix-ui/react-checkbox. See the Radix docs for the full API.