About this block

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.

When to use

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

• Filters and search

After

• Forms
• Dialogs

What you can display

One strong use is the project assignment combobox. Other searchable-select shapes:

• Member assign. Avatars beside each name, a search that filters by email or display name.
• Label picker. Colour dots beside each label, a create-new row that pre-fills the search term.
• Status select. A small icon per status in place of the check mark.

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.