5 filters applied
Updated live
Comboboxes
Comboboxes are a text input joined to a filtered list: you type, the options narrow, and you pick from what is left. They exist because a plain select stops working past a screenful of options, what the reader can see they choose, what they have to scroll for they abandon. Five blocks cover the single pick, several picks held as ticked rows that keep the list open, and several picks shown as tags inside the closed field.
The filtering is the easy half. The half that gets neglected is what the field says once it is closed and several things are picked. A bare count makes the reader open it again to remember what they chose; naming the first pick and counting the rest keeps the answer legible without a second click. The same applies to the list itself: ticking a row should not dismiss it, because someone picking several things does not want to reopen the list after each one.
Audience builder
Best for
Filter builders and segment editors: several pickers whose result is shown as you choose
Anatomy
Grey header with LIVE badge · stats card with segmented bar · All / Any grouped toggle · Combobox v2 of categories · Combobox v1 of countries · drawer footer
Build an audience
Combine filters to target the right people.
27,973
of 48,230 total contacts
Select categories
FamilyFamily in lawCo-workers...5
Select countries
Auto-updates as members change.
Share & permissions
Best for
Sharing sheets: invite people, set each person's access, manage the link
Anatomy
Dark header with close · Combobox v3 of coworkers with Invite · people-with-access rows with Owner badge and permission drop-downs · link row · copy-link footer
Share project
Invite people and manage who can access this.
Select coworkers
Ethan ColePeople with access
Sam Rivera(You)
sam@orvain.dev
Maya Chen
maya@orvain.dev
Liam Park
liam@orvain.dev
Anyone with the link
Anyone on the internet with the link can view.
orvain.dev/p/q3-launch?s=9f2a
Country combobox
Best for
Several choices from a long list: type to narrow it, tick as many as you need
Anatomy
Field Header Label · 48px field showing the first pick and a +N count · list of flag, name and box · the list stays up while you tick
Select countries
Angola
Austria
Bahamas
Bahrain
Belarus
Belize
Benin
Brazil
Chad
Mauritius
Nepal
Oman
Category combobox
Best for
Several choices in one compact field: tags, a count once they overflow, a search inside
Anatomy
48px row: tags, … and count, clear · chevron cell · search row · grouped checkbox list
FamilyFamily in lawCo-workers...5
Tag combobox
Best for
Multi-select that reads as a group of tags: the grey well holds the search and the list
Anatomy
Field Header Label · grey container with brand tags, … and count, chevron · search pill · two-column checkbox list
Tags
FamilyFamily in lawCo-workers...5
01
Using Comboboxes
Reach for it when
- A list too long to scroll but small enough to hold on the client: countries, currencies, timezones
- Picking several values from one set, where what is already ticked has to stay visible
- A filter builder whose result count or preview updates as each option goes in
- Finding one person in a company directory in order to give them access
Reach for something else when
- The whole list fits on screen at once: a radio group or a plain select shows every option without a typing step
- The reader can enter values that are not on the list; that is a tag input, because a combobox implies the options are the legal answers
- Results come from a server per keystroke and cannot be enumerated, as in search or address lookup: autocomplete is built for suggestions rather than a closed set
02
Where it shows up
01
Audience segmentation
A filter builder where each pick changes what is shown beside it. Categories and countries come from two lists, an All or Any toggle sets how they combine, and the stats card recounts as the selection moves.
02
Share sheets
Finding a coworker among everyone in the company, then setting what they can do. The typed filter reaches a name in a character or two; the people already with access sit below with their own permission menus.
03
Country and region fields
Checkout and profile forms where the list is long, ordered alphabetically and unfamiliar in parts. Typing skips the scroll, flags confirm the match at a glance, and the field names the first pick and counts any others.
04
Bulk tagging
Assigning several labels to a record at once. The closed field carries the chosen tags, an ellipsis and a counter once they outgrow the row, and a clear control that empties the lot without opening the list.
03
Questions
What is the difference between a combobox and a select?
A select shows a fixed list and nothing else. A combobox adds a text input that filters that list as you type. The distinction only matters at length: for a short list the typing step is overhead, and for a list of hundreds it is the only way to reach the bottom without scrolling. Both restrict the answer to the options on offer.
Should a multi-select combobox close its list after each pick?
No. If the reader is choosing several things, closing after every tick makes them reopen the list and find their place again. Keep it open, mark each chosen row so the state is visible, and let a click outside or the Escape key dismiss it. Single-select is the opposite case: pick and close, because there is nothing else to do.
The Orvain DispatchPremium components,
Premium components,
free in your inbox.
Join the Orvain Dispatch and get production-ready components, free to keep: React and Vue code plus the Figma frame, yours to ship.
Just components, never spam. You can unsubscribe anytime.
Orvain MCPComboboxes
Comboboxes are a text input joined to a filtered list: you type, the options narrow, and you pick from what is left. They exist because a plain select stops working past a screenful of options, what the reader can see they choose, what they have to scroll for they abandon. Five blocks cover the single pick, several picks held as ticked rows that keep the list open, and several picks shown as tags inside the closed field.
The filtering is the easy half. The half that gets neglected is what the field says once it is closed and several things are picked. A bare count makes the reader open it again to remember what they chose; naming the first pick and counting the rest keeps the answer legible without a second click. The same applies to the list itself: ticking a row should not dismiss it, because someone picking several things does not want to reopen the list after each one.
Audience builder
Best for
Filter builders and segment editors: several pickers whose result is shown as you choose
Anatomy
Grey header with LIVE badge · stats card with segmented bar · All / Any grouped toggle · Combobox v2 of categories · Combobox v1 of countries · drawer footer
Build an audience
Combine filters to target the right people.
27,973
of 48,230 total contacts
5 filters applied
Updated live
Select categories
FamilyFamily in lawCo-workers...5
Select countries
Auto-updates as members change.
Share & permissions
Best for
Sharing sheets: invite people, set each person's access, manage the link
Anatomy
Dark header with close · Combobox v3 of coworkers with Invite · people-with-access rows with Owner badge and permission drop-downs · link row · copy-link footer
Share project
Invite people and manage who can access this.
Select coworkers
Ethan ColePeople with access
Sam Rivera(You)
sam@orvain.dev
Maya Chen
maya@orvain.dev
Liam Park
liam@orvain.dev
Anyone with the link
Anyone on the internet with the link can view.
orvain.dev/p/q3-launch?s=9f2a
Country combobox
Best for
Several choices from a long list: type to narrow it, tick as many as you need
Anatomy
Field Header Label · 48px field showing the first pick and a +N count · list of flag, name and box · the list stays up while you tick
Select countries
- Angola
- Austria
- Bahamas
- Bahrain
- Belarus
- Belize
- Benin
- Brazil
- Chad
- Mauritius
- Nepal
- Oman
Category combobox
Best for
Several choices in one compact field: tags, a count once they overflow, a search inside
Anatomy
48px row: tags, … and count, clear · chevron cell · search row · grouped checkbox list
FamilyFamily in lawCo-workers...5
Tag combobox
Best for
Multi-select that reads as a group of tags: the grey well holds the search and the list
Anatomy
Field Header Label · grey container with brand tags, … and count, chevron · search pill · two-column checkbox list
Tags
FamilyFamily in lawCo-workers...5
01
Using Comboboxes
Reach for it when
- A list too long to scroll but small enough to hold on the client: countries, currencies, timezones
- Picking several values from one set, where what is already ticked has to stay visible
- A filter builder whose result count or preview updates as each option goes in
- Finding one person in a company directory in order to give them access
Reach for something else when
- The whole list fits on screen at once: a radio group or a plain select shows every option without a typing step
- The reader can enter values that are not on the list; that is a tag input, because a combobox implies the options are the legal answers
- Results come from a server per keystroke and cannot be enumerated, as in search or address lookup: autocomplete is built for suggestions rather than a closed set
02
Where it shows up
01
Audience segmentation
A filter builder where each pick changes what is shown beside it. Categories and countries come from two lists, an All or Any toggle sets how they combine, and the stats card recounts as the selection moves.
02
Share sheets
Finding a coworker among everyone in the company, then setting what they can do. The typed filter reaches a name in a character or two; the people already with access sit below with their own permission menus.
03
Country and region fields
Checkout and profile forms where the list is long, ordered alphabetically and unfamiliar in parts. Typing skips the scroll, flags confirm the match at a glance, and the field names the first pick and counts any others.
04
Bulk tagging
Assigning several labels to a record at once. The closed field carries the chosen tags, an ellipsis and a counter once they outgrow the row, and a clear control that empties the lot without opening the list.
03
Questions
What is the difference between a combobox and a select?
A select shows a fixed list and nothing else. A combobox adds a text input that filters that list as you type. The distinction only matters at length: for a short list the typing step is overhead, and for a list of hundreds it is the only way to reach the bottom without scrolling. Both restrict the answer to the options on offer.
Should a multi-select combobox close its list after each pick?
No. If the reader is choosing several things, closing after every tick makes them reopen the list and find their place again. Keep it open, mark each chosen row so the state is visible, and let a click outside or the Escape key dismiss it. Single-select is the opposite case: pick and close, because there is nothing else to do.
Related blocks
All blocksThe Orvain Dispatch
Premium components, free in your inbox.
Join the Orvain Dispatch and get production-ready components, free to keep: React and Vue code plus the Figma frame, yours to ship.
Just components, never spam. You can unsubscribe anytime.
