<optgroup>
A named group of options inside a `<select>` list.
- Display
- block
- Closing tag
- Required
- Permitted content
- Elements
<option>
Example
#<label for="course">Course</label>
<select id="course" name="course">
<optgroup label="Frontend">
<option value="html">HTML and CSS</option>
<option value="js">JavaScript</option>
<option value="react">React</option>
</optgroup>
<optgroup label="Backend">
<option value="python">Python</option>
<option value="node">Node.js</option>
</optgroup>
</select>Definition and usage
#The <optgroup> element groups related options under a shared heading. You give the group’s name in the label attribute, and the browser displays it as a heading that can’t be selected.
Groups bring order to long lists: courses by technology, cities by state, office-hour slots by day of the week. Groups can’t be nested, and <optgroup> doesn’t work inside <datalist>.
A disabled attribute on the group blocks all of its options at once, which is more convenient than disabling each one separately.
Syntax
#<optgroup label="Group name">
<option>…</option>
</optgroup>Attributes
#text
The group’s name, displayed above its options. Without it the group has no heading, so always provide it.boolean attribute
Disables all the options in the group. They’re visible, but can’t be selected.
The element also supports all global attributes, such as class, id, style and hidden.
Attributes in practice
#label
textThe group’s name, displayed above its options. Without it the group has no heading, so always provide it.
<select name="hour" aria-label="Office hour">
<optgroup label="Monday">
<option>17:00</option>
<option>18:00</option>
</optgroup>
<optgroup label="Wednesday">
<option>16:00</option>
</optgroup>
</select>disabled
boolean attributeDisables all the options in the group. They’re visible, but can’t be selected.
<select name="course" aria-label="Course">
<optgroup label="Available now">
<option>HTML and CSS</option>
</optgroup>
<optgroup label="Coming soon" disabled>
<option>Svelte</option>
<option>Rust</option>
</optgroup>
</select>Browser support
#Widely available
Works in all modern browsers, phones included. You can use it without worry.
- Chrome
- Edge
- Firefox
- Safari
Good practices
#- The group’s name isn’t sent with the form. If the server needs that information, store it in the option’s
value, for examplevalue="frontend-react". - Don’t try to nest groups. When you need several levels, split the choice into two separate lists.
Related entries
#- <select>A dropdown list the user picks one or more options from.
- <option>A single option in a `<select>` list, or a suggestion in a `<datalist>`.
- <datalist>A list of suggestions for an `<input>` field. You can pick a proposal or type your own value.
- <fieldset>A group of related form fields with a border and a `<legend>` caption.
Spotted a mistake or missing an example? Write to us.