A select lets the user choose one option from a list. It looks and behaves like an input field, with a dropdown arrow. It opens the ECO Menu as its list.
Every example on this page is the real component, not a picture. Click, tab and choose an option to try it. Figma: Base Input (shared with Input).
Choose a breakpoint, size and state and the select and its code update. Hover and focus are forced here. The select is live: choose an option to get the Active state.
A select lets the user choose one option from a list. It looks and behaves like an input field, with a dropdown arrow. It opens the ECO Menu as its list.
Select has three sizes on desktop (Large, Small, XSmall) and two on mobile (Large, Small), seven states and an optional message. It is a native <select>: the value, the label and the form submission come from the browser, and select-menu.js only replaces the popup.
This documentation has three pages. Examples & Guidelines (this page) shows when and how to use a select. Specifications holds the values: tokens, sizes, measurements, states and requirements. Code shows how to add one to a page.
Use a select when the user picks one value from a list of more than about five options. Use it to:
For two to five options, show them all with eco-radio: the user sees every option without opening anything. For a longer list use a select, so the list does not take over the form.
A placeholder is not a label: it is replaced once an option is chosen. Every select has a visible label, and the placeholder option only prompts the user.
When the user picks any number of options, use eco-checkbox. When the user types free text, use eco-input.
| The user… | Use |
|---|---|
| picks one value from a list of more than about five | Select |
| picks one of two to five options | eco-radio |
| picks any number of options | eco-checkbox |
| types free text | eco-input |
label-md or label-sm, uppercase, 4px above the box.body-md (Large) or body-sm. The placeholder is text-tertiary.body-sm, 4px below the box. Hint, error or success.The focus ring is a separate element around the box, 2px and 3px outside it, so focusing never changes the layout or the box size.
The list is the ECO Menu (eco-menu): it opens under the field, as wide as the field. A Large field opens a Large menu; Small and XSmall open a Small menu.
A select has no type variants. What changes is the message and the state.
The message sits below the field in body-sm. Hint text is neutral; error and success change the border and message color. An error message has a leading icon so color is never the only signal.
Three sizes on desktop (Large 48px, Small 40px, XSmall 32px) and two on mobile (Large 40px, Small 32px). Use the Breakpoint toggle to preview Desktop (769px and up) and Mobile (below 769px).
Large is for standard forms, Small for compact surfaces, XSmall for dense tables and filters (desktop only: on mobile it is not available, use Small). The list is the Menu: Large field opens a Large menu, Small and XSmall open a Small menu. Measurements are under Sizes in Specifications.
The field is as wide as its container, and the menu is as wide as the field. Set the width on the container.
The box has a 1px border and a white fill, like the input, with a dropdown arrow on the right. The border turns black when the field is in use or has a value. Token names and values are under Design Tokens in Specifications.
A click opens the Menu under the field (no ring on mouse). Click a row to choose; click outside to close. Try it:
A first option with value="" (disabled, hidden) shows the placeholder in text-tertiary.
Hover is border-hover. On keyboard focus the box keeps border-input-default and only the ring shows, like the input. All states are listed under States in Specifications.
Set aria-invalid="true" on an invalid field and point aria-describedby at the message. A disabled select is not focusable: it has a grey fill, a light border and text-disabled text and arrow.
All requirements are listed under Accessibility Requirements in Specifications.
Enter, Space and the arrow keys open the Menu on the chosen row. Up and Down, Home and End move; Enter or Space choose; Escape closes and returns focus to the field; Tab closes.
The control stays a native select with a label (for and id). The Menu list is a listbox with option rows, named by the label. An invalid field gets aria-invalid="true" and aria-describedby that points at the message.