<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
<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:
<label>element with its
forattribute associates with the
<select>element by referencing its
select-course. This association aids screen readers and offers a point of focus for users, guiding them to the purpose of the dropdown.
<select>element creates the dropdown menu. Within this dropdown, we utilize the
<optgroup>element to categorize options.
labelattribute, 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
The individual courses are represented by
<option>elements within each
<optgroup>. Each option can be selected by the user.
In addition to global attributes, the
<optgroup> element comes with a set of specific attributes to customize its behavior:
|Boolean attribute. When set, the options within the group are unselectable, and browsers often render them as grayed out.|
|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 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>must be a direct child of a
<select>element and cannot be nested within another
<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.
For a detailed breakdown of specific browser nuances and older version support refer to the first link in the Useful Resources below.