Select
Choose one value from a compact list.
Live example
A reviewed public example, isolated from this page.
import { Select } from "heidi-ui";
import "heidi-ui/styles.css";Copy this one primitive from its hosted source recipe or install the whole package from the Heidi UI overview.
Anatomy
content<div>The [popover] listbox panel; anchored to the trigger; owns options. Named by Select.Label or a consumer aria-labelledby — never by the trigger, whose name is the selected value. aria-multiselectable is present only when the Root is multiple.
ARIA role: listbox
group<div>role=group inside the listbox (ARIA 1.2 allows only option and group as listbox children). Named by Select.GroupLabel.
ARIA role: group
group-label<div>Names the enclosing Select.Group via aria-labelledby. Not an option; never navigable.
Uses native semantics
item<div>role=option; data-highlighted tracks aria-activedescendant; data-highlight-origin distinguishes keyboard virtual focus from pointer or seeded highlights; data-selected mirrors the committed value.
ARIA role: option
item-text<span>The option's authoritative text. Registers the label the trigger and typeahead read, so options with icons or badges still resolve a name.
Uses native semantics
label<label>Real <label for> pointing at the combobox button; its id names both the combobox and the listbox.
Uses native semantics
separator<div>Decorative rule between groups. role=presentation + aria-hidden, because a listbox may only own option and group children.
ARIA role: presentation
trigger<button>role=combobox button; popoverTarget invoker; DOM focus stays here while open; aria-activedescendant points at the highlighted option. Select-only, so no aria-autocomplete: typeahead highlights an existing option and never filters the list. Root disabled/readOnly project here as native disabled and aria-readonly.
ARIA role: combobox
value<span>Displays the selected option label, or the placeholder when empty. When the Root is multiple, joins every selected label with `separator` (default ", "); use render + state.values for any other shape.
Uses native semantics
Root properties
defaultOpendefaultValuedisabledforminputRefmultiplenameonOpenChangeonValueChangeopenreadOnlyrequiredvalue