HTML <optgroup> Element
The HTML <optgroup> element groups related <option> elements within a <select> menu and provides a label that identifies each group.
Syntax
<select>
<optgroup label="Group Name">
<option value="value1">Option 1</option>
<option value="value2">Option 2</option>
</optgroup>
</select>The <optgroup> element requires an opening tag and can use a closing tag. Its label attribute provides the name displayed for the group of options.
Attributes
The <optgroup> element supports the global HTML attributes and the following element-specific attributes:
| Attribute | Description |
|---|---|
disabled |
Prevents users from selecting any of the options contained within the group. |
label |
Specifies the text used to identify the group of related options. |
Example
This example uses <optgroup> elements to organize a list of vegetables into two labeled groups within a <select> menu.
Usage Notes
Use the <optgroup> element when a <select> menu contains enough options that dividing them into meaningful categories makes the choices easier to understand.
The label attribute identifies the group and should contain a short, descriptive name that clearly represents the options it contains.
Adding the disabled attribute to an <optgroup> prevents all of the options within that group from being selected.
The <optgroup> element groups options only one level deep. An <optgroup> cannot be nested inside another <optgroup>.
Accessibility
Meaningful group labels can make long select menus easier to understand by providing additional organization and context for related choices.
The <select> element itself should also have an accessible label, usually provided with a <label> element. The label attribute on <optgroup> identifies only the option group and does not replace the label for the overall form control.
Browser Support
Baseline: Widely available indicates a feature has been supported by core browsers for at least 30 months. At this stage, the feature is considered stable and safe for most websites to use without needing to worry about compatibility issues or fallbacks, as it is supported by the vast majority of users' devices and browser versions.
For detailed browser compatibility information, see Can I Use: HTML <optgroup> Element .
Related Elements
The <optgroup> element is closely related to the <select> element that creates the selection control, the <option> element that defines each available choice, and the <label> element used to label form controls.