Checkbox
Custom-box checkbox with checked/indeterminate/invalid/disabled states.
Preview
Checked / unchecked
<label class="nx-checkbox"><input type="checkbox" checked><span class="nx-checkbox__box"></span>Email notifications</label><label class="nx-checkbox"><input type="checkbox"><span class="nx-checkbox__box"></span>SMS notifications</label><NxCheckbox label="Email notifications" defaultChecked />
<NxCheckbox label="SMS notifications" />Variants
Indeterminate
No HTML attribute for indeterminate — it's set as a DOM property after mount.
<label class="nx-checkbox"><input type="checkbox" id="cb-indet-demo"><span class="nx-checkbox__box"></span>Select all (partial)</label><input type="checkbox" ref={(el) => { if (el) el.indeterminate = true; }} />API
React props (NxKit)
| Prop | Type | Default | Required | Description |
|---|---|---|---|---|
label | ReactNode | undefined | Rendered after the box, inside the <label>. |
Classes
| Class | Description |
|---|---|
.nx-checkbox | Label wrapper, 24px+ tap target |
.nx-checkbox__box | 18×18 custom box |
States
indeterminate
invalid
Zustimmung erforderlich
disabled
Accessibility
- Indeterminate is a DOM property, not an HTML attribute — set el.indeterminate = true after mount (React: a ref callback).
- Icon-only usage (no visible label text) still needs an accessible name via aria-label on the input; the width-axis tap-target floor applies via :has(input:not([id])).
Do / Don’t
- Do: Wrap the input + box + label text in one <label>.Don’t: Don't try to set indeterminate via a static HTML attribute — it silently does nothing.