Definition
The <optgroup>
tag is used to group a number of related options within a select element.
Example
<label for="song-select">Choose a song:</label>
<select id="song-select">
<optgroup label="Oasis">
<option>Wonderwall</option>
<option>Don't look back in anger</option>
<option>Supersonic</option>
</optgroup>
<optgroup label="Beetles">
<option>Here comes the sun</option>
<option>Hey Jude</option>
<option>Let it be</option>
</optgroup>
</select>
Usage
- The
<optgroup>
element must be used as a child of a<select>
element. - The
<optgroup>
element must contain zero or more<option>
elements, or script supporting elements (<script>
, or<template>
). - The
label
attribute must be specified. - An opening tag is required. A closing tag is optional if the element is immediately followed by another
<optgroup>
element or no more content. - You may not nest an
<optgroup>
in another<optgroup>
.
Attributes
The Optgroup element supports the Global Attributes, along with the following:
disabled
The
disabled
attribute is a boolean that determines whether the group of<option>
elements is disabled.label
The
label
attribute specifies a user-visible label representing the group of options. This attribute is required.
Specification
Browser Support
Desktop
Chrome | Edge | Firefox | IE | Opera | Safari |
---|---|---|---|---|---|
Yes | Yes | Yes | Yes | Yes | Yes |
Mobile
Android Webview | Chrome Android | Firefox Android | Opera Android | iOS Safari | Samsung Internet |
---|---|---|---|---|---|
Yes | Yes | Yes | Yes | Yes | Yes |