Option Groups

You can neatly group your options within a selection menu in order to provide a more structured layout in a long list of options by using the <optgroup> element.

The syntax is very basic, by simply using the element with a label attribute to identify the title for the group, and containing zero or more options that should be within that group.

<select name="">
  <option value="milk">Milk</option>
  <optgroup label="Fruits">
    <option value="banana">Bananas</option>
    <option value="strawberry">Strawberries</option>
  </optgroup>
  <optgroup label="Vegetables" disabled>
    <option value="carrot">Carrots</option>
    <option value="zucchini">Zucchini</option>
  </optgroup>
</select>

When using option groups, not all options need to be contained within a group. As well, disabling an option group will disable all options within the group, and it is not possible to manually re-enable a single option within a disabled group.