See it and copy it
Framework example
Choose Astro, React, or Elements to compare native usage against the shared visual output. Each example assumes the framework-level setup is already complete.
View Combobox code
Framework usage
Switch targets to compare the adapter code. This live preview runs the Astro example. React and Elements use their own behavior APIs; complete the matching framework setup before copying an example.---
import { Combobox } from '@santi020k/lumen-astro'
---
<Combobox
label="Framework"
list="ex-frameworks"
options={[
'Astro',
{ label: 'React', value: 'react' },
{ label: 'Web Components', value: 'web-components' },
{ label: 'Vue', value: 'vue', disabled: true }
]}
placeholder="Search frameworks"
/>import { Combobox } from '@santi020k/lumen-react'
export const Example = () => (
<Combobox label="Framework" list="framework-options" options={['Astro', 'React', 'Web Components']} placeholder="Search frameworks" />
)<script type="module">
import { defineLumenElements } from '@santi020k/lumen-elements/define'
defineLumenElements()
</script>
<lumen-combobox data-ui-combobox>
<label class="ui-label" for="ex-frameworks-input">Framework</label>
<input
aria-autocomplete="list"
aria-controls="ex-frameworks"
aria-expanded="false"
class="ui-input"
id="ex-frameworks-input"
placeholder="Search frameworks"
role="combobox"
type="text"
/>
<div class="ui-combobox__list" hidden id="ex-frameworks" role="listbox">
<button data-ui-combobox-option data-value="Astro" role="option" type="button">Astro</button>
<button data-ui-combobox-option data-value="React" role="option" type="button">React</button>
<button data-ui-combobox-option data-value="Web Components" role="option" type="button">Web Components</button>
</div>
</lumen-combobox>Framework differences
React: React options are strings. For separate labels and submitted values, use Select or compose the behavior hook instead.
Choose your target
Add this component
Choose the package for your runtime. All adapters share the Lumen stylesheet. Use the matching registry command when you want a local wrapper for that framework.
pnpm add @santi020k/lumen-astropnpm add @santi020k/lumen-astrolumen add Comboboxlumen add Comboboxpnpm add @santi020k/lumen-reactpnpm add @santi020k/lumen-reactlumen add Combobox --target reactlumen add Combobox --target reactpnpm add @santi020k/lumen-elementspnpm add @santi020k/lumen-elementslumen add Combobox --target elementslumen add Combobox --target elementsAPI reference
Lumen-specific props and runtime attributes for the Astro primitive. Use the framework differences above and the copyable examples for React composition and Elements attributes; the public adapter types define their supported contracts.
| Attribute | Values | Default | Description |
|---|---|---|---|
| list | string | required | Sets the id for the generated listbox and connects it to the combobox input. |
| label | string | - | Adds a visible label above the input. |
| options | Array<string | { label, value, disabled? }> | [] | Creates selectable listbox options from strings or value/label objects. |
| type | HTML input type | "text" | Sets the native input type. |
| class, className | string | "" | Merges custom classes with the generated ui-* root classes. |
| ...native attributes | HTML attributes | - | Forwards standard attributes to the root element unless the component consumes them. |
Keyboard interactions
Keyboard behavior provided by the Astro UIPrimitives runtime for this component.
| Key | Action |
|---|---|
| Escape in input or option | Close the listbox. Escape on an option also returns focus to the input. |
| ArrowDown, ArrowUp in input | Open the listbox and move focus to the first or last visible option. |
| Enter in input | Select the first visible option. |
| Enter, Space on an option | Select the focused option. |
| ArrowDown, ArrowUp on an option | Move focus through visible options, wrapping at the ends. |
| Home, End on an option | Move focus to the first or last visible option. |