Checkbox

Overview

Checkbox is a toggle control for multi-select choices. It builds upon Radix UI Checkbox, so it is keyboard accessible and works with assistive technology out of the box.

The checkbox can be controlled or uncontrolled, comes in two sizes, and supports a custom indicator icon. Pair it with a Label (using a shared id/htmlFor) to give it an accessible, clickable caption.

Usage

Import the component:

import { Checkbox } from "@eqtylab/equality";

Uncontrolled, with a default state:

<Checkbox defaultChecked />

Controlled, driving state yourself:

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

<Checkbox checked={checked} onCheckedChange={setChecked} />;

States

Default Unchecked

Checked

Disabled Unchecked

Disabled Checked

Size Variants

The checkbox comes in two sizes. md is the default; use sm in denser layouts.

Medium (default)

Small

Usage

<Checkbox size="md" defaultChecked />
<Checkbox size="sm" defaultChecked />

Custom Icon

Use the icon prop to replace the default check mark with any icon component, for example to represent an indeterminate state.

Usage

import { Minus } from "lucide-react";

<Checkbox checked icon={Minus} />;

Props

Checkbox extends the Radix Checkbox Root props (including onCheckedChange, defaultChecked, required, name, and value). The most commonly used are listed below.