Searchable Select Blueprint
Static open combobox blueprint with a search input, grouped options, one highlighted and one checked, and a create new row.
Static open combobox blueprint with a search input, grouped options, one highlighted and one checked, and a create new row.
The Application Collection unlocks the source for every Application block. All Access unlocks every Collection.
Already purchased? Log in
Searchable Select Blueprint renders the combobox in its open state as static markup: the trigger field showing the current value (Checkout Redesign), the dropdown panel with a search input, two option groups (Active projects and Archived), API v3 Migration highlighted in bg-muted, Checkout Redesign checked, and a Create new project row at the bottom. Project IDs like prj_8h2k appear in mono beside each label. No Radix portal.
Groups and options live in two typed arrays, every option carrying highlighted and selected flags so the union shape stays consistent. The open-state blueprint pattern is the only way to show a combobox inside a preview iframe without the dropdown escaping the root.
Reach for this block as a reference when building an assignable-select field in your own forms. Wire the trigger to your state, replace the static dropdown with a Radix Popover or cmdk, and point the options at your real data endpoint.
A natural flow around it on an Application Pro page:
Before
After
One strong use is the project assignment combobox. Other searchable-select shapes:
Tip: render the create-new row at the bottom of the list, not in a separate section, so keyboard users reach it naturally after scanning all options.