Select

A list that opens to pick one option among many.

On this page

Playground

Repeat

Empty option

State

Background

HTML

<div class="feitio-field"><label class="feitio-label" for="pg-s">Repeat</label><span class="feitio-select"><select id="pg-s"><option>Daily</option><option selected>Weekly</option><option>Monthly</option></select><svg class="feitio-icon" aria-hidden="true"><use href="/feitio/icons/sprite.svg#feitio-chevron-down"></use></svg></span></div>

When to use

For a choice among many options (more than six or seven) the person already knows: a time zone, a country.

When not to use

Few options: Radios; all stay in view.
Several choices: Checkbox.
To navigate: Nav or links.

Examples

Time zone

In Chrome and Edge, the list opens inside the page, as lifted paper: it shows in screen sharing and follows the theme. Elsewhere, the system list opens, which works the same.

Show code

HTML

<span class="feitio-select">
  <select id="fuso">
    <option value="">Escolha um fuso horário</option>
    <option>São Paulo (UTC−3)</option>
    …
  </select>
  <svg class="feitio-icon" aria-hidden="true">…</svg>
</span>

States

No choice

Chosen

Error

Pick a time zone

Disabled

No choice: when no option makes a sensible default, the first line invites, in soft text, and cannot be submitted. When a sensible default exists, it comes chosen.

Do and don’t

Many known options: the list saves space.

Don’t

Three options hidden in a list: with Radios, they would fit on screen and take one tap.

It is still a <select>: keyboard, screen reader and mobile work as anywhere.

Attributes

Attribute	Values	What for
`class="feitio-select"`	on the wrapping `<span>`	The frame and the drawn arrow.
`option value=""`	the first option	The "no choice" state; cannot be submitted.
`aria-invalid="true"`	with an error	The wine line.