Checkbox

A controlled checkbox supporting checked, unchecked, and indeterminate states.

When to use

• Boolean fields in forms — agree to terms, opt-in preferences.
• Multi-select lists — selecting rows in a table or items in a list.
• Indeterminate parent — a "select all" checkbox when only some children are selected.

When NOT to use

• For mutually exclusive options — use radio buttons.
• For toggling a live setting on/off — use Switch.

Import

import { Checkbox } from '@mihcm/ui/Checkbox';
import { Label } from '@mihcm/ui/Label';

Basic usage

const [checked, setChecked] = useState(false);
 
<div className="flex items-center gap-2">
  <Checkbox id="terms" checked={checked} onCheckedChange={setChecked} />
  <Label htmlFor="terms">Accept terms and conditions</Label>
</div>

Checkbox is controlled-only. Pass checked and onCheckedChange from your form state.

Sizes

Composition

• Always pair with a Label — clicking the label toggles the checkbox.
• Use indeterminate state for "select all" checkboxes where only some children are checked.
• Group related checkboxes with CheckboxGrid for multi-column layouts.

Related

• Switch — for on/off toggles that take effect immediately.
• Label — always pair with Checkbox.
• CheckboxGrid — multi-column checkbox layout.
• RadioGroup — single selection (mutually exclusive).