Delphi Design

A checkbox component for boolean selections.

Default

Unchecked

Checked

Disabled

With Label

Default

Accept terms and conditions

Checked

Receive marketing emails

Usage

import { Checkbox, Label } from "@delphi/ui";

export function Example() {
  return (
    <div className="flex items-center gap-2">
      <Checkbox id="agree" />
      <Label htmlFor="agree">I agree</Label>
    </div>
  );
}

API Reference

Prop	Type	Default	Description
`checked`	`boolean`	-	Controlled checked state
`defaultChecked`	`boolean`	`false`	Default checked state
`onCheckedChange`	`(checked: boolean) => void`	-	Called when checked state changes
`disabled`	`boolean`	`false`	Disables the checkbox
`id`	`string`	-	HTML id for label association

Always pair checkboxes with labels using htmlFor and id

Use checkboxes for binary choices or multi-select options

Make the clickable area include both the checkbox and label

Group related checkboxes together with a fieldset and legend

Preserve checkbox state when validation errors occur

Use checkboxes for mutually exclusive options — use radio buttons instead

Pre-check options that require explicit consent (like terms)

Use negative phrasing like "Don't send me emails"

Hide required checkbox errors until form submission