Checkbox

Boolean - Square Box, Amber Check

01 Preview

02 Usage

Checkbox - amber inner square when checked, no checkmark glyph.

<Checkbox label="Subscribe to changelog" defaultChecked />

indeterminate drives the DOM property, which has no HTML attribute — use it for a parent checkbox summarising a partially-selected group:

<Checkbox
  label="Select all"
  indeterminate={some && !all}
  checked={all}
  onChange={(e) => setAll(e.target.checked)}
/>

hint and error work as they do on Field — the error replaces the hint, announces via role="alert" and marks the control aria-invalid.

<Checkbox label="I agree" error="You must accept to continue" />

03 Props

Prop	Type	Default	Notes
label	`React.ReactNode`	—	—
indeterminate	`boolean`	`false`	Renders the mixed/partial state. DOM-only property, not an attribute.
hint	`React.ReactNode`	—	Helper text below the control.

Also accepts every attribute of React.InputHTMLAttributes<HTMLInputElement> — they are spread onto the root element. className is merged, not replaced, and ref is forwarded.

04 Import

import { Checkbox } from '@denizarsan/darsan.design';
import '@denizarsan/darsan.design/styles.css';