Combobox
Status Rows
A combobox with a status on every row: a colored dot and a state caption, while unavailable nodes are disabled and skipped by the arrow keys.
What you can change
- the nodes and their states through items
- the initial choice through defaultValue and the field caption through label
- the placeholder through placeholder and the empty-result text through emptyLabel
A link for your AI agent: preview, code and instructions.
Preview
Use it with AI
- 1. Copy the link.
- 2. Write to your agent in your own words and drop the link into the sentence.
- 3. The agent opens the link and installs the component from the registry.
put this on the home page as the hero:
https://vibeui.ru/c/combobox-009?lang=en&theme=dark
Not sure where to paste it? Step-by-step guide
Show the full instructions
What the link says, spelled out. Use it when your agent cannot open links — paste this text instead.
Loading…
For developers
The install command lives in the “Component source” block below — a signed link that stays valid for 24 hours.
Technical notes
The component is self-contained: one file, no dependencies, its own --vibeui-combobox-009-* palette. Client component: useState holds the query, the value and the cursor. The status arrives as a data field and colours the dot through data-status rather than through separate classes. Rows with the down status carry aria-disabled="true", selection does not fire on them, and the cursor movement jumps over them in a loop bounded by the list length — if there are no available rows, the cursor stays where it is instead of hanging. The state caption repeats the colour as a word: the state does not read from colour alone under colour blindness and in black-and-white print. The row is laid out as a three-column grid, so the captions line up on the right edge regardless of the name length.
Tags
- combobox
- status
- disabled
- a11y
Component source
The same file your agent installs. Here in case you would rather copy it by hand.
Loading…