The select element

Definition

select lets a person choose from author-provided option values. A single-select control submits one selected value; multiple can submit several values with the same name. Native presentation varies by platform.

Minimal syntax

<label for="topic">Workshop topic</label>
<select id="topic" name="topic" required>
  <option value="">Choose a topic</option>
  <option value="html">HTML foundations</option>
  <option value="accessibility">Accessibility review</option>
</select>

An empty first option can prompt a required choice. Do not mark that prompt selected in a way that prevents a previously submitted value from being restored.

Options and groups

Option text should be concise and distinct. optgroup can label meaningful clusters but cannot be nested. The submitted value is the value attribute, or the option text when no value is supplied. The server must allowlist expected values.

Browser and keyboard behavior

Native controls handle focus, opening, arrow navigation, type-ahead, selection, and platform accessibility APIs. Exact keys and popup presentation vary. Custom replacements require substantially more state and interaction work and should solve a documented need.

Accessibility decisions

Use a persistent label and visible instructions. A long list may require search or a different task design, but a custom combobox must implement its complete pattern. For multi-select, explain how selection works and consider whether a checkbox group is clearer.

Common failures

• Sending display text when the server expects a stable value.
• Accepting an arbitrary client value without an allowlist.
• Using a disabled placeholder that blocks recovery or review.
• Styling away focus or native state.
• Replacing a short native list with an inaccessible custom popup.

Verification checklist

Select with pointer, keyboard, and screen reader in each supported browser. Inspect the name, role, current value, required state, and option grouping. Submit empty, valid, unexpected, and restored values; verify the server rejects anything outside its catalog. Test long labels, 200% zoom, forced colors, and 320-pixel layout without clipping the current choice.

Maintenance note

Treat option values as a versioned server contract. Renaming visible labels is safe when stable values retain their meaning; repurposing a value can corrupt stored or submitted interpretation.