Dropdowns
A dropdown is a panel that hangs off a trigger, does one job and closes: a menu of actions, a list of values to pick from, or the account panel behind an avatar. The seven in this family cover that whole range, from a labelled form field that opens its list in place to a scrolling sheet of grouped actions.
Worth separating before you build one: a menu fires actions, a listbox holds values, and the two behave differently even though they look alike. A menu closes on the first click, because the click was the point. A multi-select panel must not, closing after every tick turns setting a handful of filters into a handful of round trips. Keyboard handling splits the same way, and so does what a screen reader announces. The other thing people miss is what should happen when a required field is opened and dismissed with nothing chosen: say so on the spot, rather than letting the submit be the first news of it.
Dropdown field
Best for
Forms: a labelled, required field that opens its list in place
Anatomy
Field Header Label with the required mark and hint · 60px field · the list in flow while open · footer hint that turns red when nothing is picked
Command menu
Best for
Right-click and ⌘K menus: short actions that each own a keyboard chord
Anatomy
a search field with its ⌘K chips opens it · Five 48px rows · 20px icon and label · a ⌘ chip pair per row that lifts to white on the active one · arrow keys and the real chords move it
Pop-up list
Best for
Menus where each entry needs a line of explanation
Anatomy
the picked row's own chip opens it · Five rows · 20px icon · label with an optional Badge · description line · the picked row keeps the wash and border/subtle
Model picker
Best for
Choosing several options at once: a titled sheet of rows with a checkbox each
Anatomy
a chip naming what is on opens it · Card title over a divider · four rows with their 28px mark, label, Badge and description · 20px Checkbox · multi-select
Take action
Best for
Long action sheets: grouped sections in one scrolling card
Anatomy
a Take action button opens it · Two titled sections · 44px icon containers, the active one white and lifted · app rows with their own marks · the card scrolls past the drawn height
Account menu
Best for
The avatar menu: settings, support, the plan and the way out
Anatomy
a Sam Rivera profile chip opens it · Avatar header with the plan badge · settings group · Support label over two more rows · plan row with the dark Upgrade button · red Logout
Sam Rivera(You)sam@orvain.devProSupport
Switch account
Best for
Multi-account apps: the same menu with a refresh and a way to add another
Anatomy
a Sam Rivera profile chip opens it · Avatar header with a 32px refresh button · four rows ending in red Logout · Add New Account across the foot
Sam Rivera(You)sam@orvain.devUsing Dropdowns
Reach for it when
- A form field whose answer comes from a known, short list
- Actions that belong to one object and don't earn toolbar space
- The avatar menu: settings, support, the plan, the way out
- Filters where several options get set in one visit
Reach for something else when
- More options than anyone will scroll: a combobox with type-ahead finds them faster
- Two or three exclusive choices: radio buttons show them all without a click
- The one action a screen exists for. That belongs on a visible button
Where it shows up
Account and plan menus
The avatar in the corner opens what is not navigation: profile and settings, support, the current plan with its upgrade path, and the sign-out that sits apart from everything above it.
Keyboard command menus
A short list of actions that each own a chord, opened from a search field. The chord printed on the row is how people graduate from clicking it to never opening the menu again.
Model pickers
Choosing among things that need explaining: a mark, a name, a badge and a line of description per row, with a checkbox on each when more than one can be on at a time.
Required form fields
A labelled field that opens its list underneath itself instead of floating over the form, keeping the header, the hint and the error footer where the reader is already looking.
Questions
Should a dropdown close after something is selected?
A menu of actions closes on the click, because the action was the point and leaving it open hides the result. A panel where several options can be on at once stays open, and closes on an outside click, on Escape, or on an explicit done control. A single-value picker closes on choice and puts focus back on its trigger.
What keyboard behaviour does a dropdown owe?
The trigger opens on Enter, Space or Down, and reports whether it is expanded. Arrow keys move the active row without scrolling the page, Home and End jump to the ends, and typing letters jumps to a matching row. Enter takes the active row, Escape closes and returns focus to the trigger, and Tab should not leave a half-open panel behind.
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.
Orvain MCPDropdowns
A dropdown is a panel that hangs off a trigger, does one job and closes: a menu of actions, a list of values to pick from, or the account panel behind an avatar. The seven in this family cover that whole range, from a labelled form field that opens its list in place to a scrolling sheet of grouped actions.
Worth separating before you build one: a menu fires actions, a listbox holds values, and the two behave differently even though they look alike. A menu closes on the first click, because the click was the point. A multi-select panel must not, closing after every tick turns setting a handful of filters into a handful of round trips. Keyboard handling splits the same way, and so does what a screen reader announces. The other thing people miss is what should happen when a required field is opened and dismissed with nothing chosen: say so on the spot, rather than letting the submit be the first news of it.
Dropdown field
Best for
Forms: a labelled, required field that opens its list in place
Anatomy
Field Header Label with the required mark and hint · 60px field · the list in flow while open · footer hint that turns red when nothing is picked
Command menu
Best for
Right-click and ⌘K menus: short actions that each own a keyboard chord
Anatomy
a search field with its ⌘K chips opens it · Five 48px rows · 20px icon and label · a ⌘ chip pair per row that lifts to white on the active one · arrow keys and the real chords move it
Pop-up list
Best for
Menus where each entry needs a line of explanation
Anatomy
the picked row's own chip opens it · Five rows · 20px icon · label with an optional Badge · description line · the picked row keeps the wash and border/subtle
Model picker
Best for
Choosing several options at once: a titled sheet of rows with a checkbox each
Anatomy
a chip naming what is on opens it · Card title over a divider · four rows with their 28px mark, label, Badge and description · 20px Checkbox · multi-select
Take action
Best for
Long action sheets: grouped sections in one scrolling card
Anatomy
a Take action button opens it · Two titled sections · 44px icon containers, the active one white and lifted · app rows with their own marks · the card scrolls past the drawn height
Account menu
Best for
The avatar menu: settings, support, the plan and the way out
Anatomy
a Sam Rivera profile chip opens it · Avatar header with the plan badge · settings group · Support label over two more rows · plan row with the dark Upgrade button · red Logout
Sam Rivera(You)sam@orvain.devProSupport
Switch account
Best for
Multi-account apps: the same menu with a refresh and a way to add another
Anatomy
a Sam Rivera profile chip opens it · Avatar header with a 32px refresh button · four rows ending in red Logout · Add New Account across the foot
Sam Rivera(You)sam@orvain.devUsing Dropdowns
Reach for it when
- A form field whose answer comes from a known, short list
- Actions that belong to one object and don't earn toolbar space
- The avatar menu: settings, support, the plan, the way out
- Filters where several options get set in one visit
Reach for something else when
- More options than anyone will scroll: a combobox with type-ahead finds them faster
- Two or three exclusive choices: radio buttons show them all without a click
- The one action a screen exists for. That belongs on a visible button
Where it shows up
Account and plan menus
The avatar in the corner opens what is not navigation: profile and settings, support, the current plan with its upgrade path, and the sign-out that sits apart from everything above it.
Keyboard command menus
A short list of actions that each own a chord, opened from a search field. The chord printed on the row is how people graduate from clicking it to never opening the menu again.
Model pickers
Choosing among things that need explaining: a mark, a name, a badge and a line of description per row, with a checkbox on each when more than one can be on at a time.
Required form fields
A labelled field that opens its list underneath itself instead of floating over the form, keeping the header, the hint and the error footer where the reader is already looking.
Questions
Should a dropdown close after something is selected?
A menu of actions closes on the click, because the action was the point and leaving it open hides the result. A panel where several options can be on at once stays open, and closes on an outside click, on Escape, or on an explicit done control. A single-value picker closes on choice and puts focus back on its trigger.
What keyboard behaviour does a dropdown owe?
The trigger opens on Enter, Space or Down, and reports whether it is expanded. Arrow keys move the active row without scrolling the page, Home and End jump to the ends, and typing letters jumps to a matching row. Enter takes the active row, Escape closes and returns focus to the trigger, and Tab should not leave a half-open panel behind.
Related blocks
All blocksPremium 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.
