Select

Edit on GitHub

Select lets users choose a single option from a predefined list, presented as a closed field that expands into a menu on interaction.

@volvo-cars/css v2.5.1@volvo-cars/react-forms v2.0.1

When to use

Users can only choose one option, especially as part of a form submission flow.
The list is long or requires scrolling. Select condenses options that would otherwise overwhelm the layout.
Screen space is limited and a collapsible menu is preferable to showing every option inline.
A sensible default can be pre-selected, turning the interaction into a quick confirmation rather than a cold choice.
Options are listed in a logical, scannable order (alphabetical or by likelihood of selection) so users can find their choice without needing to compare every option visually.
The list of options may change based on context, for example when it depends on another field or is loaded from data.

When not to use

There are 3 or fewer options that users need to see at once. Use radio buttons instead: all choices stay visible and selection takes one fewer click.
Users can select more than one option. Use checkboxes or a multiselect instead.
The choice is a binary decision that takes immediate effect, such as on/off. Use a toggle instead.
The list is long and users would benefit from typing to filter or search. Use a combobox instead.
The options represent actions to take, such as sort or filter, rather than a value to submit, or the interaction happens outside a form. Use a dropdown menu instead.
Options need richer content, such as icons, descriptions, or multi-line text, that a native-style select can’t render well. Consider a combobox or a custom option list instead.

Choosing variant

Top label

Use a top label by default. It gives longer, translated labels room to grow, keeps the label distinct from the selected value, and lets a select sit the same height as an adjacent button.

Floating label

Use a floating label only in compact layouts, such as a sidebar or a filter panel, where the vertical space it saves matters more than the benefits of a top label.

Presentation on mobile and desktop

Select can appear in two ways, depending on whether it’s styled:

Default select. The browser draws the picker with its own OS-native UI. The design system doesn’t control the look, so it varies by browser and platform.
Custom styled select. Built with className="custom-select", so the design system controls the look in browsers that support it. It opens as a bottom sheet on mobile and as an anchored dropdown next to the field on desktop. This custom look only renders in the latest Chromium-based browsers, such as Chrome and Edge. Every other browser falls back to the default native picker.

The custom styled select is a safe choice: it keeps the design consistent and on-brand where supported, without breaking or degrading elsewhere.

Labeling

Every Select needs a visible label. Don’t rely on the empty first option alone to identify the field.

Form validation

Validate lazily: show an error after the user changes the selection or submits the form, not before they’ve made a choice.

Marking required fields

Mark whichever fields are fewer. If most fields in a form are required, mark the optional ones instead of marking every required one.

Layout and spacing

Stack form fields vertically. It’s easier to scan and complete than a multi-column layout. Group two fields on the same line only when they have a clear logical relationship, such as city and postal code.

Use these spacings between fields:

24px between stacked fields.
16px between fields placed side by side.
8px between a field and its label, and between a field and its hint or error message.

Match the select’s width to its container. On mobile, span the full width between margins; on desktop, keep every field in a form the same width for visual alignment.