Checkbox

Overview

Built on Radix UI's Checkbox primitive. Supports checked, unchecked, and indeterminate states. When children are provided, wraps the checkbox and label in a flex row.

Usage

import { Checkbox } from "@leanicon/web-builder-library";

Standalone:

With inline label:

Controlled usage

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

<Checkbox id="accept" checked={checked} onCheckedChange={(value) => setChecked(value === true)}>
  I accept the terms
</Checkbox>;

Notes

• Accepts all Radix Checkbox.Root props (checked, defaultChecked, onCheckedChange, disabled, required, name, value).
• The indeterminate state displays a minus icon; checked state displays a check icon.
• Use aria-invalid to trigger the error ring style.
• Dark mode is handled via semantic tokens.