optgroup

#html #forms #small-print

---

A plastic surgeon’s consultation form had a dropdown of about 40 procedures in alphabetical order. Anybody who wanted a facelift had to scroll past three kinds of breast surgery and a chin implant to find it.

The fix is one element.

consultation.html

<select name="procedure">
  <optgroup label="Face">
    <option>Eyelid surgery</option>
    <option>Facelift</option>
  </optgroup>
  <optgroup label="Breast">
    <option>Breast lift</option>
  </optgroup>
  <optgroup label="Body">
    <option>Tummy tuck</option>
  </optgroup>
  <optgroup label="Non-surgical">
    <option>Chemical peel</option>
  </optgroup>
</select>

HTML

<optgroup> puts a non-selectable heading above a run of options. Each browser styles it differently and you get very little say in how. It can’t nest either, so there are exactly two levels and the second one is all you get.

That’s the whole element. I bring it up because in the wild I keep finding a disabled <option> with dashes typed around it instead. I think that’s somebody reinventing <optgroup> without knowing it existed.

The dashes version is announced as an option that happens to be unavailable. <optgroup> is announced as a group label, which is what it is.

Reach for it any time a list has natural sections. It costs nothing and it lets people scan the list instead of scrolling through it.