hp-toggle-group
Group of toggle buttons with single or multi-select semantics. Slotted children carry
value attributes; the group tracks value (string in single mode,
space-separated in multiple mode) and stamps aria-pressed on each pressed
child.
Install
bun add @hexpunk/core litimport "@hexpunk/core";Properties
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
type | type | HpToggleGroupType | "single" | Selection model. `single` allows one button pressed at a time (toggling on a different button unpresses the previous one). `multiple` allows any combination. |
value | value | string | "" | Current selection. Single mode: the chosen value as a string; empty string = nothing selected. Multiple mode: space-separated values. |
orientation | orientation | "horizontal" | "vertical" | "horizontal" | Layout direction — also drives the honeycomb zigzag direction when `layout="honeycomb"`. |
layout | layout | HpToggleGroupLayout | "flex" | Visual arrangement. - `flex` (default) — children laid out as inline-flex with a standard row / column. - `honeycomb` — children positioned in a hex-grid zigzag. Subsequent items add to the right (orientation=horizontal) or alternate bottom-right / bottom-left (orientation=vertical). Each adjacent pair shares an edge with hp-grid's stroke-overlap correction so the strokes coincide into a single line. |
disabled | disabled | boolean | false | Disable the entire group. |
Events
| Event | Type | Description |
|---|---|---|
change | Event | When selection changes. detail: { value } |
Slots
| Slot | Description |
|---|---|
(default) | hp-button or hp-cell children with `value` attributes |
Accessibility
Single mode uses role="radiogroup" (mutually-exclusive selection);
multiple uses role="group". Each pressed child carries
aria-pressed="true".
No per-component entries in CHANGELOG.md yet.