HTML reference

optgroup

The <optgroup> element groups related <option> elements inside a <select>, giving each category a label.

Basic example

<label for="car">Choose a car</label>
<select id="car" name="car">
  <optgroup label="Electric">
    <option value="compact-ev">Compact EV</option>
    <option value="family-ev">Family EV</option>
  </optgroup>
  <optgroup label="Hybrid">
    <option value="hybrid-sedan">Hybrid sedan</option>
  </optgroup>
</select>

The group label helps users understand the category while each option supplies the value that is submitted. The label on the select itself still matters.

Useful details

• Put option elements inside the group.
• Use disabled on an optgroup when a whole category is unavailable.
• Keep labels short and distinct.
• Do not use grouping to hide important choices or make a simple list harder to scan.

Related pages

• select
• option
• label
• form
• English HTML reference