The option and optgroup elements

Definition

option represents one choice in a select or compatible list. optgroup collects related options beneath a visible group label. The submitted value comes from value when present, otherwise from the option's text.

Minimal syntax

<label for="region">Region</label>
<select id="region" name="region">
  <optgroup label="Americas">
    <option value="ca">Canada</option>
    <option value="mx">Mexico</option>
  </optgroup>
</select>

Choose stable machine values and clear visible labels. Do not infer business logic from the label after submission.

Selection and placeholders

The first option is selected by default unless another option carries selected. A required single-select can begin with an empty-value instructional option, but that text should tell the person what to choose rather than act as a hidden label. multiple changes both interaction and submitted data, so use it only when the task genuinely requires several choices.

Browser and accessibility behavior

Native select interaction differs across platforms. Arrow keys, typing, touch pickers, and screen-reader commands are supplied by the browser and operating system. Optgroup labels organize choices but are not selectable values. Styling options remains constrained and inconsistent, which is usually a worthwhile trade for reliable native behavior.

Common failures

• Duplicate values make server-side intent ambiguous.
• A selected placeholder has a real value and passes required validation.
• Optgroup labels are vague, so repeated option names remain confusing.
• A custom dropdown replaces native behavior without reproducing its keyboard, focus, name, value, and mobile-picker contracts.

Verification checklist

Submit every boundary choice and inspect the actual request. Use keyboard typing, arrow keys, touch, zoom, and a screen reader on representative platforms. Confirm required validation rejects an empty placeholder. Test long translated labels and ensure the server accepts only allowlisted values rather than trusting any submitted option text.

Test restoring a saved or server-provided selection. The selected value should remain valid when options change, and the visible label should still identify the stored choice. Avoid inserting an old value as an unreviewed synthetic option merely to silence a mismatch.