Checkbox

Checkbox base prototype

The Checkbox base prototype provides checked, unchecked, disabled, and indeterminate interactions on top of Toggle semantics.

<wc-base-checkbox-root class="flex items-center gap-2">
  <wc-base-checkbox-indicator class="flex h-5 w-5 items-center justify-center rounded-[4px] border">
    <svg class="h-3 w-3" viewBox="0 0 12 12" fill="none">
      <path d="M2.5 6L5 8.5L9.5 3.5" stroke="currentColor" stroke-width="1.5" />
    </svg>
  </wc-base-checkbox-indicator>
  <span>Accept terms</span>
</wc-base-checkbox-root>

Checkbox is split into root and indicator parts connected through the anatomy system.

• Root (base-checkbox-root) manages Toggle state (checked, checkedChange), disabled behavior, and the additional indeterminate state.
• Indicator (base-checkbox-indicator) reads the root checked and indeterminate states through anatomy runtime access and reflects them for rendering. It does not own checkbox state.

The base-checkbox anatomy family uses a contains relation from root to indicator. A checkbox is expected to have at least one indicator, and may have more than one indicator when multiple visual surfaces need the same indicator semantics.

In the Web Components preview runtime, prototype IDs are registered with a wc- tag prefix: wc-base-checkbox-root and wc-base-checkbox-indicator.

indeterminate may be uncontrolled via defaultIndeterminate or controlled via indeterminate.

When an enabled indeterminate checkbox is pressed:

1. checked follows the normal asToggle() checked behavior and emits checkedChange.
2. The root requests indeterminate: false by emitting indeterminateChange.
3. If indeterminate is uncontrolled, the root also clears its internal indeterminate state.
4. If indeterminate is controlled, the external owner must handle indeterminateChange and pass indeterminate={false} back in.

Disabled checkboxes do not change checked or indeterminate state on press.