Figma select components

Selects are the workhorses of forms with too many options to show at once: country fields, role pickers, anything where listing every choice on the page would bury the form. They’re also one of the most mislabelled components in design: half the world calls them dropdowns, which makes it easy to grab the wrong pattern and only notice when the interaction feels off.

The 6 select components and 90 variants above cover the whole family properly, from a basic option list to searchable and multi-select versions.

Select, dropdown menu, or combobox?

A select chooses a value in a form. A dropdown menu runs actions, like the menu behind a table row’s three dots. They look similar closed and behave completely differently open, which is why they’re separate component sets here.

The third sibling is the combobox: a select you can type into to filter the options, covered by the search type in this set. When users know what they’re looking for, searching beats scrolling every time.

All three live in this set, so the decision is a component swap rather than a redesign, and the closed states look consistent across your forms no matter which behavior sits behind them.

Anatomy and types

Each select pairs a label, a trigger field with placeholder or selected value, and a chevron with the option list that opens below it. Six types cover the recurring cases: a default text select, icon leading, avatar leading for people pickers, dot leading for status values, a searchable select, and a tags type for multi-value input.

Everything comes in three sizes, and the searchable version even includes a designed empty state for searches with no results, an edge case most mockups meet for the first time in production. There’s even a scroll bar sub-component for long option lists, so a 30-item menu looks like it actually scrolls instead of stretching to the floor of your frame.

Placeholder wording is the small detail that separates polished forms from default ones. "Select team member" tells users what they’re choosing; a bare "Select" or "Choose an option" tells them nothing. Since the placeholder state is a variant here, writing a real placeholder costs nothing.

States on both sides of the popover

The trigger field covers placeholder, focused, open, and disabled states, and the menu items underneath have their own set: default, hover, disabled, and selected with a check. That last one matters more than it looks.

Focus and selection are different things in an option list, a distinction the W3C listbox pattern is built around, and designing both states now saves your developers from inventing the difference later. The separate multi-select component adds active and open states for managing several chosen values at once.

When a select is the wrong call

Under roughly five options, show them all as radio buttons instead; hiding four choices behind a click is pure friction. And for data users already know by heart, like their own country or state, Nielsen Norman Group’s dropdown guidelines are blunt: typing beats scrolling. That’s exactly what the searchable select type is for.

When you’re ready to build, the same selects exist in code. Untitled UI React selects are open source, built with Tailwind CSS and React Aria, with keyboard navigation, type-ahead, and listbox semantics handled for you.