Hexpunk
InstallConceptsElementsProsehp-cellhp-codehp-copyhp-hexhp-latexhp-visually-hiddenhp-buttonhp-checkboxhp-formhp-labelhp-radiohp-selecthp-sliderhp-togglehp-toggle-grouphp-badgehp-taghp-progresshp-spinnerhp-backgroundhp-clusterhp-collapsiblehp-demohp-gridhp-scroll-areahp-separatorhp-sidebarhp-toolbarhp-avatarhp-iconhp-pixelhp-linkhp-menubarhp-navigation-menuhp-tabshp-alert-dialoghp-context-menuhp-dialoghp-dropdown-menuhp-hover-cardhp-popoverhp-tooltiphp-bannerhp-toasthp-tetherhp-module-handlehp-unfold-listhp-unfold-overlayhp-unfold-pagehp-bondhp-link-nodePaletteAnimationsReleases

hp-radio

Single radio button — pairs with <hp-radio-group> as a parent. The group manages selection, arrow-key navigation, and dispatches the change event. Individual hp-radio renders the hex chrome (hollow at rest, primary- filled with a concentric dot when checked) and emits hp-radio-select on activation.

Examples API Intent Changelog
small
medium
large
<body> <hp-radio-group value="medium"> <hp-radio value="small"></hp-radio> <hp-radio value="medium"></hp-radio> <hp-radio value="large"></hp-radio> </hp-radio-group> document .querySelector("hp-radio-group") .addEventListener("change", (ev) => { console.log(ev.detail.value); }); </body>
a
b
c (disabled)
<body> <hp-radio-group value="b"> <hp-radio value="a"></hp-radio> <hp-radio value="b"></hp-radio> <hp-radio value="c" disabled></hp-radio> </hp-radio-group> </body>

Install

bun add @hexpunk/core lit
import "@hexpunk/core";

Properties

Property Attribute Type Default Description
value value string "" Value emitted when this radio is selected. Required for the parent hp-radio-group to track selection.
checked checked boolean false Selected state. Set by the parent hp-radio-group; consumers shouldn't write directly — use the group's `value` instead.
disabled disabled boolean false Disabled — blocks selection, removes from tab order.
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
hp-radio-select CustomEvent When this radio is activated. detail: { value }

CSS Parts

Part Description
radio The radio container wrapping hp-hex + inner dot
dot The inner filled hex shown when checked

Accessibility

Group exposes role="radiogroup"; each child role="radio" with aria-checked. Arrow keys move focus + selection between children (ArrowDown / ArrowUp for vertical, ArrowLeft / ArrowRight for horizontal); Home / End jump to first / last. Only one radio is tabbable at a time (roving tabindex pattern).

No per-component entries in CHANGELOG.md yet.

esc
↑ ↓ navigate ↵ open esc close