<optgroup> Option group
Puts related options in a select under one label.
<optgroup> collects related <option> elements inside a <select>. Its label attribute appears above the group as a heading nobody can select.
Long lists get much easier to scan, for example cities grouped by country. You can disable a whole group in one go. One optgroup cannot sit inside another.
The optgroup element in the WHATWG standard (opens in a new tab) describes the label attribute. For the choices inside, see the option element.
Syntax
<select name="name">
<optgroup label="Group">
<option>Choice</option>
</optgroup>
</select>When to use it
Car models by brand, appointment slots split into morning and afternoon, stores by region: when a select list has categories like these, <optgroup> adds headings that help people find their choice. A long list gets faster to scan, and the submitted data stays the same.
You get one level only. Deeper data, such as country then region then city, works better as two or three separate selects, or as a typed answer with a datalist. With just two small groups, consider radio buttons under two short headings. They may beat a drop-down.
The group label is never sent. The server receives the chosen option's value and nothing else, so that value has to make sense by itself. Say two regions each have a Springfield store. Give them distinct values like il-springfield and mo-springfield, or the server gets "Springfield" with no way of telling which store the customer meant. The option element page covers values.
Attributes
| Attribute | What it does |
|---|---|
label | Name of the group (required). |
disabled | Disables every option in the group. |
Live example
Edit the code and watch the preview.
<label for="food">Lunch</label>
<select id="food" name="food">
<optgroup label="Hot">
<option>Soup</option>
<option>Pasta</option>
</optgroup>
<optgroup label="Cold">
<option>Salad</option>
<option>Sandwich</option>
</optgroup>
</select>More examples
Time slots with a full group
The appointment times are grouped by part of the day. Evening is fully booked. One disabled attribute on that optgroup greys out all of its options, and the group label explains the reason.
<form>
<label for="slot">Appointment</label>
<select id="slot" name="slot">
<optgroup label="Morning">
<option value="09:00">9:00</option>
<option value="10:30">10:30</option>
</optgroup>
<optgroup label="Afternoon">
<option value="14:00">14:00</option>
<option value="15:30">15:30</option>
</optgroup>
<optgroup label="Evening (fully booked)" disabled>
<option value="18:00">18:00</option>
</optgroup>
</select>
<button>Book</button>
</form>Same name in two groups
There is a Springfield store in each of two regions. The visible text repeats. The values do not, so the submitted data still identifies the store. Choose one and submit to see what gets sent.
<form>
<label for="store">Pick-up store</label>
<select id="store" name="store">
<optgroup label="Illinois">
<option value="il-chicago">Chicago</option>
<option value="il-springfield">Springfield</option>
</optgroup>
<optgroup label="Missouri">
<option value="mo-kansas-city">Kansas City</option>
<option value="mo-springfield">Springfield</option>
</optgroup>
</select>
<button>Choose store</button>
</form>Tip: An optgroup needs a label.
Browser support
optgroup works in every browser and is in the HTML Living Standard. Nesting optgroups is not allowed, and if you try, the HTML parser turns the nested group into a sibling. The browser and system choose how group labels look. Usually that means bold labels with indented options, but phone pickers can do their own thing.
Accessibility
When users move into a group, screen readers announce its label, so keep it short and descriptive. There is an example with grouped options in the W3C listbox pattern (opens in a new tab).
Common mistakes
Wrong
<optgroup>Fruit
<option>Apple</option>
</optgroup>Right
<optgroup label="Fruit">
<option>Apple</option>
</optgroup>Write the group name in the required label attribute. Text content will not do.
Frequently asked questions
How do I group options in a dropdown?
Wrap the related <option> elements in <optgroup label="Group name"> inside the <select>. The label shows up as a heading above its options, and it cannot be selected. Put disabled on the optgroup to disable every option in it. Nesting optgroups is not allowed.
Can the optgroup label be selected?
No. An <optgroup>'s label is only a heading and never gets submitted. If people need to pick a whole category, add a separate option, such as All fruit, inside or before the group. The label attribute itself is required.