Select

One value from a fixed list, in the same box as Input, at the measurements it is actually drawn at.

Try it

Choosing a select

A select is for one value from a list too long to lay out: past six or so options, a row of radios is a wall, and a select is one line. Under that, prefer radios, which show every answer at once and need no opening. Two answers are a switch or a checkbox, never a select.

Put the options in the order the reader expects — alphabetical for names and places, by size or by time where the list has one, and the common answer first when there is one — and choose it for them when the form usually wants it. A placeholder is a prompt for the field’s answer, Choose a service, offered in the list but never chosen: it is not an option, so it cannot be the value a required field submits.

Select or dropdown menu

Both open a list under a control, and in a drawing they look the same. They answer different questions. A select holds a value: the choice stays visible in the field afterwards, belongs to a form, and is submitted with it. A dropdown menu runs a command: nothing is kept, the list closes, and something happens — reschedule, export, cancel.

The test is what the control shows once the list has closed. If it shows the choice, it is a Select. If choosing was the end of it, it is a dropdown menu.

Anatomy and sizes

The element underneath is a native <select>. That gives keyboard behaviour, the platform picker on a phone, form participation and screen-reader support without a line of code — the chevron and the box are the only things added. The box is Input’s, at its three heights, with the same fill and the same border that arrives on focus; the chevron sits in a 20px slot at the end, in the tertiary colour, and an iconStart can take the slot at the start.

The trade is that the option list cannot be styled: it belongs to the operating system. For a system that has to work in a clinic on whatever device is to hand, that is the right way round.

States

No hover, as on Input: the box does not react to the pointer, and the border arrives with focus. Disabled drops the paint and the focus; invalid takes the danger border, and inside a Field the message that says what to choose.

In a Field

Choose nothing and the message stays. The placeholder is offered but cannot be chosen — it is a prompt, not an answer — and the message says what to do, beside the field it is about.

Accessibility

The chevron is hidden from assistive technology. It repeats what the select role already announces, and a decoration that says the same thing twice is noise.

The placeholder option is disabled, so it can be read but never submitted as an answer. Required selects need a real choice.

Options are given an explicit colour. Native option lists render in the operating system’s palette, and a dark-theme field can otherwise open a list of invisible text in browsers that do respect the setting.

The select never renders its own label. Wrap it in a Field or give it an aria-label, as the sizes above do; a select with neither is announced as its current value and nothing else.

Props

The options are the children. All remaining select attributes are passed through — name, value, disabled, required, onChange; inside a Field, the id, the description and the invalid flag come from it unless you pass your own.