Select

Put the select in a Field to give it a label, helper, and error. Without a Field, set aria-label. Inside a Field, set required and disabled on the Field.

Anatomy

The menu shows about five and a half rows, then scrolls; the cut-off row shows there is more. It is the same menu on touch screens; there is no system picker.

Variants

• field (default): a form field that fills its container. Name it with a Field or aria-label.
• filter: a compact button for a filter bar. It reads "Status" until something is chosen, then "Status: Open", and gets a tinted fill. filter-label is required: it is the visible text and the accessible name. Don't put a filter in a Field.

Sizes

Option labels are Label Medium (14/20) at both sizes. A row with a description is taller. The heights match Input and Button, so a form lines up. Long values and options are cut off with an ellipsis; they never wrap.

States

Hover doesn't change the field. Keyboard focus colors its border and thickens it; there is no ring. The filter variant tints on hover and shows a focus ring.

• disabled: can't be focused or opened, and isn't submitted. Prefer an active field, or readonly and a helper that says why.
• readonly: shows the value and submits it. The field stays focusable, but the menu doesn't open and the chevron is hidden.
• Error: set error on the Field. The message appears below and the border turns red, even while focused.

Options

• Write options as <option> children. value defaults to the option's text.
• selected on an option, or value on the select, sets the starting value. Without either, the field shows the prompt; the first option is never picked for you.
• disabled keeps an option visible but skips it. Say why in its text.
• data-description adds a short second line. Use it to help people choose, such as a price or a limit. Don't describe every option. Screen readers read it after the option's name.

<optgroup label="…"> groups options under a header. Keyboard navigation skips headers. Other child elements are ignored.

When to use

• Use a select for about 4 options up to a screenful, when space matters.
• Use a Radio group for 2 or 3 options, or when people should compare the options side by side. Try asking a question with fewer options first.
• Use a Combobox for a long list, such as countries or currencies.
• Use a Multiselect when people can pick more than one.
• Use a Menu when the items run actions instead of setting a value.

Content

• Label: name what you're asking for, in sentence case, with no colon. It goes on the Field, or in filter-label.
• Prompt: "Select a…", in sentence case, with no end punctuation. Use one only when there is no sensible default. It disappears once a value is chosen, so don't put anything people need in it.
• Options: one short line each, in sentence case, with no commas or semicolons. Order them alphabetically or in another order people can guess.
• Don't start options with an icon or emoji. Typing "S" must land on "Sweden".
• Group headers: one or two words.
• Pre-selecting: don't pre-select an answer to a question. For a setting, pre-select the current or most likely value.
• Error: say how to fix it, using the label's words: "Select your state of residence".

More in Errors.

Do / Don't

Related

• Field: the label, helper, and error around a select.
• Radio group: 2 or 3 options, all visible.
• Combobox: one option from a long list, by typing to filter.
• Multiselect: several options; it has the same filter variant.
• Country select: a combobox with the country list built in.
• Menu: items that run actions.
• Select family: how these four compare.

API

Attributes

Slots

<option> takes value, selected, disabled, and data-description. <optgroup> takes label.

Events

change fires when someone chooses a different option. It doesn't fire while they move through the menu, or when you set value in code. Read the new value from value.

In a form, the value submits under name, and a form reset restores the starting value.

CSS

• ::part(trigger): the field.
• ::part(listbox): the menu.

Tokens

In high contrast, the menu also gets a 1px border/default. Values per theme: Color.

Accessibility

Built in:

• Screen readers hear a combobox, as with a native select: its name, value, open or closed, the highlighted option, and which options are disabled.
• Focus stays on the field while the menu is open. Esc, Tab, a click outside, and choosing all close it.
• Moving through the menu never changes the value. Only choosing does.
• Typing a letter jumps to a matching option; it never types text.
• The menu stays on screen when zoomed. Every row is at least 32px tall.
• With reduced motion, the chevron turns without animation.

Your part:

• Give every select a name: a Field label, aria-label, or filter-label.
• Set autocomplete on personal data, such as country or birth month.
• Write errors as the Content rules say.

Contrast limits

• Field border: 1.33:1 in light and 2.00:1 in dark, under the 3:1 minimum; 4.22:1 in high contrast. The edge is faint in light, so always show a label.
• Prompt text: 3.26:1 in light, 4.09:1 in dark, and 4.22:1 in high contrast, under the 4.5:1 text minimum. Don't put anything people need in it.