Checkbox
Checkbox keeps the portable semantics on one labeled boolean choice with an optional mixed state. The web API is one namespaced root hook, two optional message hooks, and the native checkbox attributes, drawn with appearance: none so it looks the same in every browser.
Public web API
The root holds the native checkbox, its label, and optional messages. The box comes first and the whole label is the hit area.
<div data-bitsy-checkbox>
<input
id="terms"
name="terms"
type="checkbox"
required
aria-describedby="terms-help"
/>
<label for="terms">I agree to the terms of service</label>
<p id="terms-help" data-bitsy-checkbox-description>
You can read them before you continue.
</p>
</div>
<div data-bitsy-checkbox data-bitsy-size="sm">
<input
id="consent"
name="consent"
type="checkbox"
aria-invalid="true"
aria-describedby="consent-error"
/>
<label for="consent">Share usage data</label>
<p id="consent-error" data-bitsy-checkbox-error>
Choose this to continue.
</p>
</div>indeterminate is a DOM property with no HTML attribute. Set it from your own script; the Bit only styles :indeterminate.
States and sizes
Unchecked, checked, and indeterminate each combine with disabled and invalid. The check and the dash are shapes, so the state never rests on color alone.
You can read them before you continue.
Choose this to continue.
Foundation versus Bit
Raw checkboxes stay native and pick up the brand through accent-color. data-bitsy-checkbox adds the drawn box, the label layout, the message hooks, and the invalid and mixed looks. It does not add "select all" syncing, tile checkboxes, or any JavaScript; group naming comes from a native fieldset and legend.