What is Optgroup in Select?

Grouping select options.

What You'll Learn

Grouping select options
Using the label attribute
Disabling groups

The Optgroup Element

The <optgroup> element groups related options within a <select> dropdown. The label attribute provides the group heading.

Example

index.htmlHTML

<select id="car" name="car">
  <optgroup label="Swedish Cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
  </optgroup>
  <optgroup label="German Cars">
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </optgroup>
</select>

Disabled Group

index.htmlHTML

<optgroup label="Dried Fruits" disabled>
  <option value="raisins">Raisins</option>
</optgroup>

Notes

Label is displayed but not selectable
Cannot nest optgroups
Disabled applies to all options in group

What is the Datalist Element?

What is Fieldset and Legend?