HTML5 <optgroup> Tag

The HTML <optgroup> tag is used to create a grouping of options within a <select> element.

The only content permitted inside this element is zero or more <option> elements. For this element, the start tag is mandatory. The end tag is optional if this element is immediately followed by another <optgroup> element, or if the parent element has no more content.

The parent of the <optgroup> tag can only be a <select> element.

Here is an example of using this tag:

<p>Which course would you like to watch today?</p>
<p><label>Course:
  <select name="c">
    <optgroup label="8.01 Physics I: Classical Mechanics">
      <option value="8.01.1">Lecture 01: Powers of Ten</option>
      <option value="8.01.2">Lecture 02: 1D Kinematics</option>
      <option value="8.01.3">Lecture 03: Vectors</option>
    </optgroup>
    <optgroup label="8.02 Electricity and Magnestism">
      <option value="8.02.1">Lecture 01: What holds our world together?</option>
      <option value="8.02.2">Lecture 02: Electric Field</option>
      <option value="8.02.3">Lecture 03: Electric Flux</option>
    </optgroup>
    <optgroup label="8.03 Physics III: Vibrations and Waves">
      <option value="8.03.1">Lecture 01: Periodic Phenomenon</option>
      <option value="8.03.2">Lecture 02: Beats</option>
      <option value="8.03.3">Lecture 03: Forced Oscillations with Damping</option>
    </optgroup>
  </select>
</label></p>

Attributes

disabled

If this Boolean attribute is set, none of the items in this option group is selectable. Often browsers grey out such control and it won’t receive any browsing events, like mouse clicks or focus-related ones.

label

The name of the group of options, which the browser can use when labeling the options in the user interface. This attribute is mandatory if this element is used.

Examples

See the Pen HTML optgroup Tag by Tutorialio (@tutorialio) on CodePen.

Further Reading

  1. Read more about the HTML <optgroup> element on MDN.
  2. You can also read the HTML <optgroup> tag reference on W3C.

Reader Comments

1. You can register or login to post a comment. Asking readers to register improves the quality of discussion.

2. As a registered user, you will also get to access features like choosing between a light and dark theme or anything else that we might implement in future.

Follow Us For Updates

FacebookTwitterGoogle+
Go To Top