Checkbox

Inputs

Stablev1.0.0

Accessible checkbox with indeterminate state support, built on Ariakit.

Preview

Accept terms

Installation

pnpm add @component-labs/ui

Usage

import { Checkbox } from "@component-labs/ui";

<Checkbox label="Accept terms" />

Props

Name	Type	Default	Description
`variant`	`'default' \| 'outline'`	`'default'`	Visual style variant of the checkbox
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Size of the checkbox
`label`	`ReactNode`	`-`	Label text to display next to the checkbox
`description`	`ReactNode`	`-`	Description text to display below the label
`checkIcon`	`ReactNode`	`-`	Custom check icon to replace the default
`checked`	`boolean`	`-`	Controlled checked state
`defaultChecked`	`boolean`	`-`	Default checked state for uncontrolled usage
`disabled`	`boolean`	`false`	Whether the checkbox is disabled

Examples

Basic Checkbox

Simple checkbox with a label

<Checkbox label="I agree to the terms and conditions" />

With Description

Checkbox with additional description text

<Checkbox
  label="Marketing emails"
  description="Receive updates about new features and products"
/>

Sizes

Different checkbox sizes

<div className="flex flex-col gap-4">
  <Checkbox size="sm" label="Small checkbox" />
  <Checkbox size="md" label="Medium checkbox" />
  <Checkbox size="lg" label="Large checkbox" />
</div>

Variants

Available visual variants

<div className="flex flex-col gap-4">
  <Checkbox variant="default" label="Default variant" />
  <Checkbox variant="outline" label="Outline variant" />
</div>

Controlled

Using checkbox in controlled mode

const [checked, setChecked] = useState(false);

<Checkbox
  checked={checked}
  onChange={(e) => setChecked(e.target.checked)}
  label="Controlled checkbox"
/>

Disabled State

Checkbox in disabled state

<Checkbox label="Disabled checkbox" disabled />

Performance

Bundle Size

~3kB gzipped

Minified and gzipped

Dependencies

•@ariakit/react
•class-variance-authority

Accessibility

•Built on Ariakit's accessible Checkbox component
•Proper ARIA attributes (aria-checked, aria-disabled)
•Keyboard accessible (Space to toggle)
•Focus visible states with ring indicator
•Screen reader announcements for state changes
•Supports indeterminate state