Checkbox

Include or exclude a single option.

Live example

A reviewed public example, isolated from this page.

Open example
import { Checkbox } from "heidi-ui";
import "heidi-ui/styles.css";

Copy this one primitive from its hosted source recipe or install the whole package from the Heidi UI overview.

Anatomy

  • indicator<span>

    Decorative checked/mixed mark. It is absent while unchecked unless keepMounted is true, inherits Root state hooks, and paints the theme fallback mark only when custom children are absent.

    Uses native semantics

  • root<span>

    Focusable role=checkbox visual control. A sibling visually-hidden native input owns label and form behavior; Root owns aria-checked and state synchronization.

    ARIA role: checkbox

Root properties

  • checked
  • defaultChecked
  • disabled
  • form
  • id
  • indeterminate
  • inputRef
  • name
  • nativeButton
  • onCheckedChange
  • readOnly
  • required
  • uncheckedValue
  • value