<optgroup>

The optgroup tag, or Option Group element, creates a group of related options or choices within a <select> tag.

Syntax

Group related options into smaller categorized lists to make them easier to handle for the user than single longer lists.

<select name="colors" id="colors">
  <optgroup label="Blue Colors">
    <option value="blue">Blue</option>
    <option value="aqua">Aqua</option>
    <option value="sky">Sky</option>    
  </optgroup>
  <optgroup label="Red Colors">
    <option value="red">Red</option>
    <option value="red-orange">red Orange</option>
    <option value="fire">Fire</option>    
  </optgroup>
</select>

Attributes

disabled
Designates the option group should be disabled.

label
Provides a label for the option group.

Browser Compatibilty

Demos

User-submitted codepen.io examples of <optgroup> ↴

@DevKrishna

See the Pen on CodePen.

reply?

Want to Contribute?

Submit a codepen.io link that demonstrates <optgroup>: