HTML <optgroup> element

The <optgroup> element groups related <option> elements inside a <select>. In a conventional select, its label attribute supplies a heading for the group. For example, label="Fruit" can identify a group containing "Apple" and "Pear."

The group heading identifies the relationship between the options and is not itself a selectable choice. The grouping can help both sighted users and people using assistive technology navigate the list. When the form is submitted, the selected options supply their values under the select's name; the group's label is not an additional submitted value.

The disabled attribute makes all the group's options unavailable for selection and excludes their values from form submission. Individual options can also be disabled separately. An option cannot be made available simply by omitting its own disabled attribute while the enclosing group remains disabled.

Several groups can appear within one select, but an <optgroup> cannot contain another <optgroup>. Newer customisable selects also allow a <legend> as the group's first child to supply its heading. In supporting browsers this heading takes precedence over the label attribute. The conventional form requires a label attribute when there is no child legend. The example uses two labelled groups, with the second disabled so its options remain unavailable.

Attributes: label, disabled, GLOBALS.

Typical layout:
<label for="pf-demo-food">Food</label><br>
<select id="pf-demo-food" name="food">
  <optgroup label="Fruit">
    <option value="apple">Apple</option>
    <option value="pear">Pear</option>
  </optgroup>
  <optgroup label="Vegetables" disabled>
    <option value="carrot">Carrot</option>
    <option value="pea">Pea</option>
  </optgroup>
</select>
<p>Open the list to compare the available and disabled groups.</p>

Visual representation: