hp-select

Custom listbox select — trigger button shows the current value; click opens a popover list of <hp-option> children. Arrow keys move focus; Enter / Space select; Escape dismiss; type-ahead jumps to options starting with the typed letters. Uncontrolled mode — internal value state, fires `change`.

Examples

API

Intent

Changelog

small

medium

large

xlarge (sold out)

<body> <hp-select value="medium" placeholder="Choose a size"> <hp-option value="small">small</hp-option> <hp-option value="medium">medium</hp-option> <hp-option value="large">large</hp-option> <hp-option value="xlarge" disabled>xlarge (sold out)</hp-option> </hp-select> <script> document.querySelector("hp-select") .addEventListener("change", (ev) => { console.log(ev.detail.value); }); </script> </body>

Install

bun add @hexpunk/core lit

import "@hexpunk/core";

Properties

Property	Attribute	Type	Default	Description
`value`	`value`	`string`	`""`	Currently selected value. Setting programmatically activates the matching option (or empty when no match).
`placeholder`	`placeholder`	`string`	`"Select…"`	Placeholder shown on the trigger when no value is selected.
`disabled`	`disabled`	`boolean`	`false`	Disabled — blocks toggle and removes from tab order.
`name`	`name`	`string \| undefined`	—	Optional form name.

Events

Event	Type	Description
`hp-select-open`	`CustomEvent`	When the listbox opens
`hp-select-close`	`CustomEvent`	When the listbox closes
`change`	`Event`	When the value changes via user input. detail: { value }

Slots

Slot	Description
`(default)`	hp-option children

CSS Parts

Part	Description
`trigger`	The trigger button
`listbox`	The popover listbox

Accessibility

Trigger exposes role="combobox" + aria-haspopup="listbox" + aria-expanded. Listbox role="listbox"; options role="option" + aria-selected. Type-ahead resets after 500ms of silence. Tab on an open listbox closes it (focus moves to the next tab stop on the page).