The <optgroup> HTML Element

Overview

The <optgroup> element categorizes related <option> items within a <select> dropdown list. This categorization arranges options under a common label, offering a clearer view when multiple option groups are present.

Examples and Usage

With <optgroup>, developers can provide a more organized and intuitive experience, especially when a dropdown list contains multiple categories of options. Our example showcases a potential use case for the element: presenting course selections categorized by academic departments.

<label for="select-course">Select a course:</label>
<select id="select-course" name="course">
    <optgroup label="Sciences">
        <option value="physics">Physics 101</option>
        <option value="biology">Biology 101</option>
    </optgroup>
    <optgroup label="Arts">
        <option value="history">World History</option>
        <option value="music">Introduction to Music</option>
    </optgroup>
    <optgroup label="Engineering">
        <option value="mech">Mechanical Engineering</option>
        <option value="comp">Computer Science</option>
    </optgroup>
</select>

The setup above consists of:

The <label> element with its for attribute associates with the <select> element by referencing its id, select-course. This association aids screen readers and offers a point of focus for users, guiding them to the purpose of the dropdown.
The <select> element creates the dropdown menu. Within this dropdown, we utilize the <optgroup> element to categorize options.
Each <optgroup> contains a label attribute, which names the group of options. This label appears in the dropdown as a non-selectable entry, providing a visual separator and context for the subsequent <option> elements.
The individual courses are represented by <option> elements within each <optgroup>. Each option can be selected by the user.

Attribute Breakdown

In addition to global attributes, the <optgroup> element comes with a set of specific attributes to customize its behavior:

Attribute	Description
`disabled`	Boolean attribute. When set, the options within the group are unselectable, and browsers often render them as grayed out.
`label`	Specifies the name for the group of options. Browsers utilize this to label the options in the user interface. It's required to include this attribute when using the `<optgroup>` element.

Accessibility Aspects

Using the <optgroup> element provides structure to dropdowns, which aids assistive technologies in interpreting the content. The label attribute on the <optgroup> conveys the context of the grouped options, and developers should make sure it's descriptively set. From the ARIA perspective, <optgroup> assumes the role=group. While global aria-* attributes can be applied, it's advised against assigning any other role to the <optgroup>.

Associated Elements

<button>
<datalist>
<fieldset>
<form>
<input>
<label>
<legend>
<meter>
<option>
<output>
<progress>
<select>
<textarea>

Additional Notes

The <optgroup> must be a direct child of a <select> element and cannot be nested within another <optgroup>.
Only <option> elements within the <optgroup> can be selected.
Always set the label attribute for each <optgroup> as it's essential for defining the group's context.
The functionality of the <select> dropdown remains unchanged with the use of <optgroup>. The grouping serves as a visual and semantic improvement.

Browser Compatibility

For a detailed breakdown of specific browser nuances and older version support refer to the first link in the Useful Resources below.

Browser	Chrome	Edge	Safari	Firefox	Opera	Internet Explorer
Support	Yes	Yes*	Yes	Yes	Yes	Yes*

Useful Resources

Can I use HTML element: optgroup

The HTML Living Standard Specification: optgroup