HTML optgroup and multiple select: make several choices explicit

Use it in a concrete workflow

A dispatch supervisor assigns a job to two or more service areas. The field name makes repeated submitted values visible to the backend, while grouped options shorten scanning through the area list. Native multiple-selection gestures vary by device, so explain them and test a phone before committing to this interface. If several choices are central to the task, a clearly labeled checkbox group may be easier to operate.

<form action="/dispatch/areas" method="post">
  <label for="service-areas">Service areas; select every area involved</label>
  <select id="service-areas" name="area" multiple size="5" required>
    <optgroup label="North depot">
      <option value="north-loading">Loading</option>
      <option value="north-inspection">Inspection</option>
    </optgroup>
    <optgroup label="South depot">
      <option value="south-packing">Packing</option>
      <option value="south-dispatch">Dispatch</option>
    </optgroup>
  </select>
  <button type="submit">Save service areas</button>
</form>

Behavior and ownership

The server must accept and validate repeated area values, reject unknown codes, and enforce any limit on selections. Optgroup provides a label for a set of choices; it does not submit its own value.

Performance and maintenance

The HTML is small. The usability cost of a native multiple select can be high on touch devices, so compare it with checkboxes using the real choice count and target devices.

Common Mistakes

• Do not parse repeated values as one comma-separated string by accident.
• Do not assume users know the modifier key for multiple selection.
• Do not expect an optgroup label in submitted data.

Connected lessons

• HTML select and textarea: preserve meaningful values and editable text
• HTML radio and checkbox controls: submit choices with explicit values
• HTML labels: bind each control to a durable accessible name