Select

A labelled select for choosing one option from a short list.

When to use it

• Choosing one value from a known, short list.

When not to use it

• Two options. Use radios, which show both without a click.
• Very long lists. Consider a filtered search instead.

Examples

Each example is a conformance case: every emitter — React, and each framework adapter — is checked against exactly this markup.

basic

<div class="gov-field">
  <label class="gov-field__label" for="department">Department</label>
  <select class="gov-select" id="department" name="department">
    <option value="all">All departments</option>
    <option value="engineering">Engineering</option>
    <option value="finance">Finance</option>
  </select>
</div>

{
  "name": "department",
  "label": "Department",
  "options": [
    {
      "value": "all",
      "label": "All departments"
    },
    {
      "value": "engineering",
      "label": "Engineering"
    },
    {
      "value": "finance",
      "label": "Finance"
    }
  ]
}

with-value

<div class="gov-field">
  <label class="gov-field__label" for="department">Department</label>
  <select class="gov-select" id="department" name="department">
    <option value="all">All departments</option>
    <option value="engineering">Engineering</option>
    <option value="finance" selected>Finance</option>
  </select>
</div>

{
  "name": "department",
  "label": "Department",
  "value": "finance",
  "options": [
    {
      "value": "all",
      "label": "All departments"
    },
    {
      "value": "engineering",
      "label": "Engineering"
    },
    {
      "value": "finance",
      "label": "Finance"
    }
  ]
}

with-error

<div class="gov-field gov-field--error">
  <label class="gov-field__label" for="status">Status</label>
  <p class="gov-field__error" id="status-error">
    <span class="gov-visually-hidden">Error:</span> Select a status.</p>
    <select class="gov-select gov-select--error" id="status" name="status" aria-describedby="status-error" aria-invalid="true">
      <option value="">Choose a status</option>
      <option value="active">Active</option>
    </select>
  </div>

{
  "name": "status",
  "label": "Status",
  "error": "Select a status.",
  "options": [
    {
      "value": "",
      "label": "Choose a status"
    },
    {
      "value": "active",
      "label": "Active"
    }
  ]
}

Accessibility

Accessible name. The associated label.

• A native select. It is the only listbox that is correct on every browser, screen reader and mobile platform without a line of JavaScript.
• Wires label, hint and error exactly as Input does.

Class names

View the manifest for this component: packages/manifest/components/select.json