abaabil

Checkbox

5th lightest of the eight, by js weight

A single <input type="checkbox">, themed through CSS custom properties, with a real associated <label> and support for the indeterminate state.

Example (a11y tier)

Some, but not all, items below are selected.
Notify me about

Import

import Checkbox from 'abaabil/checkbox'         // structure only
import Checkbox from 'abaabil/checkbox/styled'  // + CSS
import Checkbox, { CheckboxGroup } from 'abaabil/checkbox/a11y'  // + label/description/indeterminate

indeterminate is a DOM property, not an attribute

indeterminate has no HTML attribute equivalent: it exists only as a property on the checkbox's DOM node, so it cannot be set in JSX the way checked or disabled can (<input indeterminate /> is silently ignored by the browser). The a11y tier applies it to the underlying element via a ref and a useEffect, which is why indeterminate exists as a component prop at all, and mirrors it to aria-checked="mixed" so the state also reaches assistive technology, not just sighted users looking at the rendered dash. A consumer-supplied ref composes with the component's own rather than overwriting it, so passing one does not silently break this.

CheckboxGroup

A <fieldset>/<legend> pair, the accessible, native way to group related checkboxes under one shared label. It renders no ARIA role of its own because it doesn't need one: <fieldset> already has the correct native group semantics.

Props

PropTypeDefaultTierDescription
classNamestring—allMerged with the base class.
labelstring—a11yAccessible name, rendered as a real <label>. The platform does not supply one.
descriptionstring—a11yRendered text, wired via aria-describedby.
indeterminateboolean—a11yApplied to the DOM node via ref + effect (not a JSX attribute), mirrored to aria-checked="mixed".
idstring—a11yOverrides the generated input id.
refref—a11yComposes with the component's own ref to the underlying input.
...props——allEverything else (checked, defaultChecked, onChange, aria-describedby, ...) lands on the <input>.

CheckboxGroup accepts label (rendered as the <legend>) and className, plus any other prop, which spreads onto the <fieldset>.