HTML <optgroup> tag
The <optgroup> tag is used to group together related elements in a dropdown list under one heading which will result in better organization and usability if you have many options.
Attributes
| Attribute | Description | Possible values |
|---|---|---|
| label | Required. The text that will be displayed for the optgroup heading | theText |
| disabled | Disables all the options in an optgroup (will be grayed out and inaccessible) | disabled |
Standard attributes
class, dir, id, lang, style, title, xml:lang
For more information on standard attributes, check out our HTML standard attributes reference page.
Event attributes
onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup
For more information on event attributes, check out our HTML event attributes reference page.
Example
<label for="location">Where are you from?</label>
<select name="location">
<optgroup label="North America">
<option value="USA">USA</option>
<option value="Canada">Canada</option>
<option value="Mexico">Mexico</option>
</optgroup>
<optgroup label="South America">
<option value="Ecuador">Ecuador</option>
<option value="Chile">Chile</option>
<option value="Peru">Peru</option>
</optgroup>
<optgroup label="Europe">
<option value="Sweden">Sweden</option>
<option value="Bulgaria">Bulgaria</option>
<option value="Latvia">Latvia</option>
</optgroup>
</select>
Output:
Tips & notes
Use CSS to style form elements in many ways like setting a border, font size and color, background color, padding, and much more.