hp-checkbox
Hex checkbox — hollow at rest, primary-filled with a check glyph when checked.
indeterminate stamps a horizontal bar for mixed state. Click or Space toggles;
focus-ring on keyboard focus.
Install
bun add @hexpunk/core litimport "@hexpunk/core";Properties
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
checked | checked | boolean | false | Current checked state. Toggled on click / Space. |
indeterminate | indeterminate | boolean | false | Indeterminate (mixed) state — visual is a horizontal bar instead of a check. Sets aria-checked="mixed" for assistive tech. Cleared on next user toggle. |
disabled | disabled | boolean | false | Disabled — blocks toggle and removes from tab order. |
name | name | string | undefined | — | Optional name for form integration (not yet wired to the form submission API; placeholder for forthcoming hp-form integration). |
value | value | string | "on" | Optional value (paired with name) for form integration. |
size | size | "xxs" | "xs" | "sm" | "xs" | Cell size. `xs` (default, 32px) is the comfortable form-input size; `xxs` (20px) is dense / tabular; `sm` (100px) is the content-hex size — rarely useful here but available. |
Events
| Event | Type | Description |
|---|---|---|
change | CustomEvent | When checked changes via user input. detail: { checked } |
CSS Parts
| Part | Description |
|---|---|
box | The hex container wrapping hp-hex + the glyph |
glyph | The check / dash glyph overlay |
Accessibility
role="checkbox", aria-checked reflects state
(true / false / mixed for indeterminate). Space
toggles. disabled blocks the toggle and removes from tab order with
aria-disabled="true" + tabindex="-1".
No per-component entries in CHANGELOG.md yet.