Select v0.1.0 Forms

Single-select listbox (combobox pattern): typeahead, disabled-item skipping, keyboard navigation, anchored positioning.

import { Select } from "latticeui-react";

Examples

Basic

Full listbox keyboard support: arrows, Home/End, and typeahead.

Framework

value: null

Show code

<Select
  label="Framework"
  placeholder="Pick a framework"
  items={[
    { value: "react", label: "React" },
    { value: "vue", label: "Vue" },
    { value: "svelte", label: "Svelte" },
    { value: "angular", label: "Angular", disabled: true },
  ]}
  onValueChange={setValue}
/>

Anatomy

These data-part attributes are a versioned public API - style and test against them; they will not change in a minor release.

Part	Element	Stable selector
`root`	`div`	`[data-scope="select"][data-part="root"]`
`label`	`span`	`[data-scope="select"][data-part="label"]`
`trigger`	`button[role=combobox]`	`[data-scope="select"][data-part="trigger"]`
`value`	`span`	`[data-scope="select"][data-part="value"]`
`indicator`	`span`	`[data-scope="select"][data-part="indicator"]`
`positioner`	`div`	`[data-scope="select"][data-part="positioner"]`
`content`	`ul[role=listbox]`	`[data-scope="select"][data-part="content"]`
`item`	`li[role=option]`	`[data-scope="select"][data-part="item"]`
`itemText`	`span`	`[data-scope="select"][data-part="itemText"]`
`itemIndicator`	`span`	`[data-scope="select"][data-part="itemIndicator"]`

Props

Prop	Type	Default
`items` *	`{ value: string; label: string; disabled?: boolean }[]`	—
`label`	`string`	—
`placeholder`	`string`	`"Select an option"`
`value / defaultValue`	`string \| null`	—
`onValueChange`	`(value: string \| null) => void`	—
`disabled`	`boolean`	—

Accessibility

Roles: combobox triggerlistboxoption

Key	Action
`ArrowDown/ArrowUp`	opens / moves highlight
`Enter / Space`	selects highlighted option
`Home/End`	first/last option
`printable chars`	typeahead
`Escape`	closes

Focus stays on the trigger; aria-activedescendant tracks the highlighted option.

Styling

Override styles by targeting the stable selectors below from any unlayered CSS - it always beats the library's @layer latticeui styles, no !important needed.

[data-scope="select"][data-part="item"] {
  /* your overrides */
}

State attributes: data-state=open|closed (trigger)data-highlighteddata-placeholder