Code has been added to clipboard!

HTML optgroup Tag

<optgroup>

1. HTML optgroup: Main Tips
2. Defining HTML Option Groups
3. Two optgroup Tag Attributes

HTML optgroup: Main Tips

HTML optgroup element enables grouping related options within a dropdown menu.
It is a child of a <select> element and a parent to <option> elements.
optgroup stands for HTML option group.
HTML optgroup tags support all global attributes.

Defining HTML Option Groups

When you're using HTML select, option groups may prove useful as they simplify the selection for users. Using HTML <optgroup> tags, you can select optgroups and define them using a label:

Example

<select>
  <optgroup label="Sports">
    <option value="baseball">Baseball</option>
    <option value="basketball">Basketball</option>
  </optgroup>
  <optgroup label="Shopping">
    <option value="food">Food</option>
    <option value="gift">Gift</option>
  </optgroup>
</select>

Try it Live Find Courses

Two optgroup Tag Attributes

You have to include the label attribute when using HTML optgroup tags. It defines the name for the HTML option group, and the browser will use its value for labeling the groups for the user:

Example

<select>
  <optgroup label="Main">
    <option value="beef">Beef with broccoli</option>
    <option value="chicken">Chicken Teriyaki</option>
  </optgroup>
  <optgroup label="Dessert">
    <option value="hot">Chocolate lava cake</option>
    <option value="cold">Banana split</option>
  </optgroup>
</select>

Try it Live Find Courses

disabled disables the selection of a specific group. Most browsers also show the disabled options in grey text:

Example

<select>
  <optgroup label="Destination">
    <option value="cuba">Cuba</option>
    <option value="hawaii">Hawaii</option>
  </optgroup>
  <optgroup label="Time" disabled>
    <option value="week">7 days</option>
    <option value="2weeks">14 days</option>
  </optgroup>
</select>