Select
Select lets users choose a single option from a predefined list, presented as a closed field that expands into a menu on interaction.
When to use
Section titled “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, so users only need to confirm it.
- 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
Section titled “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
MultiSelectinstead. - The choice is a binary decision that takes immediate effect, such as on/off. Use a
Switchinstead. - Users need to search or filter a long list to find options they don’t know by name. 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 or descriptions, that a select can’t show. Consider a combobox or a custom option list instead.
Choosing a variant
Section titled “Choosing a variant”Top label
Section titled “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
Section titled “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
Section titled “Presentation on mobile and desktop”Choose how the list of options looks:
- Default select: uses the browser’s usual menu. Its appearance depends on the browser and device.
- Custom styled select: uses Volvo styling. The list opens from the bottom of a small screen or next to the field on a larger screen. Browsers that do not support this style use their usual menu.
See the custom styled select examples in Specification for how to use it and handle long labels.
Labeling
Section titled “Labeling”Every Select needs a visible label. Don’t rely on the empty first option alone to identify the field.
Validation
Section titled “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
Section titled “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
Section titled “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.