Checkbox
Toggle control for boolean or multi-select choices
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.
| Name | Description | Type | Default | Required |
|---|---|---|---|---|
checked | The controlled checked state. | boolean, "indeterminate" | — | ❌ |
onCheckedChange | Callback fired when the checked state changes. | (checked: boolean | "indeterminate") => void | — | ❌ |
defaultChecked | The initial checked state when uncontrolled. | boolean | — | ❌ |
disabled | Prevents interaction and visually mutes the checkbox. | boolean | false | ❌ |
size | The size of the checkbox. | sm, md | md | ❌ |
icon | Custom indicator icon component shown when checked. | React.ElementType | — | ❌ |