Select (Combo)

COMPONENT GUIDE

Explore behaviors before defining the interface.

Quick guide for designers

Always consider the context of the application, even when the guidance follows a standard pattern. Interaction design documents intent. Behavior must be verified in the implementation.

When to use

Use to choose between options in a compact field.

What to draw

Show the label, selected value, options, help, and errors when present.

How it behaves

On opening, the person chooses an option and the field updates its value. Native selector commands vary by platform.

What to document in Figma

Define whether the selector is native or custom. A custom control requires documenting its opening, navigation, and confirmation pattern.

How to review

Check whether the purpose and states are clear on small and large screens and with zoom. Verify documented behavior in the implementation, including keyboard and screen reader use where applicable.

Full guidance

Interaction Design

Questions to ask when designing interactive components of type Select (Combo).

Important:
Depending on the context in which you build your components, there may be further questions, and some listed here may not be necessary. Assess each case individually.

Designing for "no interaction"

Before interacting, can you tell that there is a list of options to choose from?
Does the label clearly communicate the expected value type?
Is the selected value or placeholder visually understandable?

Designing for mouse use (any pointing device)

Is there visual feedback when hovering over the field?
Does clicking the field open the options list or show the native selector?
Does selecting an option update the visible value?

Designing for gesture use

Does the field have a comfortable touch area?
Does tapping the field show the selector or options list?
Is the selected value clear after choosing an option?

Designing for keyboard use (any non-pointing device)

Is there visible focus on the field?
Can you open and change the selection using the keyboard according to the browser or system pattern?
Can you leave the field and continue the flow without focus getting trapped?

Designing for screen reader use

Is the select label announced correctly?
Is the selected value announced?
Is the required, invalid, or disabled state announced when applicable?
Can options be navigated and selected with assistive technology?

Interaction methods

Possible interaction methods for components of type Select (Combo).

Important:
Only the main methods are listed here. Custom components require further study.

Mouse interaction (any pointing device)

Clicking the field opens the selector or options list.
Clicking an option updates the selected value.
Clicking outside the selector should close the list when applicable.

Keyboard interaction (any non-pointing device)

TAB moves focus to the field.
arrow keys navigate or change options according to the browser's native behavior.
ENTER, SPACE or system combinations may open or confirm the selection depending on the platform.

Keyboard (or gesture) interaction + screen reader

The field must have a programmatically associated label.
Help and errors should be associated with the field when present.
Custom selects should follow a proper combobox or listbox pattern rather than merely imitate the native appearance.

Gherkin

BDD (Behavior-Driven Development) methodology focusing on three pillars: User Stories, Acceptance Criteria, and Gherkin Syntax (Given, When, Then).

Scenario: Given that I am on a page containing a select

Keyboard navigation

WHEN I use the Tab key to move focus to a select
The focus I SEE is strongly indicated visually
THEN, when I use the keyboard to open or navigate the options
I SEE that I can move through the options
THEN, when I select an option
I SEE the field value updated

Desktop screen reader

When I use a screen reader on a computer (NVDA, JAWS, VoiceOver) and move focus to the component
- I HEAR the field's label and purpose.
- I HEAR the selected value.
- I HEAR that there are selectable options.
THEN, when I activate or change the component
I HEAR or perceive that its corresponding state, value, content, or action has been updated.

Mobile screen reader

WHEN I use a screen reader on a phone (TalkBack, VoiceOver) and swipe to focus the component, the following happens:
- I HEAR the field's label and purpose.
- I HEAR the selected value.
- I can open the selector and choose an option with system gestures.
THEN, when I double-tap or use the appropriate gesture to activate the component
I HEAR or perceive that its corresponding state, value, content, or action has been updated.

Considerations

Considerations for components of type Select (Combo).

This page considers the use of a native select or equivalent form selection component.
Custom comboboxes, listboxes, and autocomplete have their own behaviors and need specific documentation.
Do not use a placeholder as a substitute for a persistent label.

References

Additional references for components of type Select (Combo).

Important:
Most references are on the course platform alongside the lessons cited in this material.

Disclaimer:
The links listed here are a curated collection of references where you can find implemented components, rather than recommendations. There is no unified implementation format and no guarantee that these links follow every design pattern. Direct questions to the teams responsible for the linked materials. Before copying a model, remember that all materials are constantly updated and that patterns, particularly proprietary ones, may change.