Combobox

Filter Combobox

A basic combobox: the trigger shows the selection, the panel holds a filter field and the list, and the value can only come from the list.

What you can change

the field caption through label and the empty text through placeholder
the filter hint through searchPlaceholder and the screen-reader name of the filter through filterLabel
the list content through options, the initial choice through defaultValue and the no-results text through emptyLabel

A link for your AI agent: preview, code and instructions.

Preview

1440pxHost theme

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.

Caption

Placeholder

Panel open

Accent

Background

1Pick it here

put this on the home page as the hero:

https://vibeui.ru/c/combobox-001?lang=en&theme=dark

2Paste into the chat

3Get it in your project

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…

A link for your AI agent: preview, code and instructions.

Preview

1440pxHost theme

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.

Caption

Placeholder

Panel open

Accent

Background

1Pick it here

put this on the home page as the hero:

https://vibeui.ru/c/combobox-001?lang=en&theme=dark

2Paste into the chat

3Get it in your project

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 palette in the local --vibeui-combobox-001-* variables. Client component: useState holds the value, the query, the open state and the cursor index, and useEffect moves focus into the filter field on opening. The trigger button carries aria-haspopup="listbox" and aria-expanded, the field inside the panel is a role="combobox" with aria-controls and aria-activedescendant, and the list is a role="listbox" with role="option" rows and aria-selected. Keyboard: the arrows move the cursor in a loop, Home and End jump to the edges, Enter selects, Escape closes the panel and returns focus to the button. The panel lies in the flow rather than on top: a floating layer in a narrow column has nothing to position it against without measurement. Mouse selection goes through onMouseDown with preventDefault, so that the field does not lose focus before the selection.