HTML Optgroup
In this page:
Grouping Options with optgroup
optgroup wraps a set of related <option> elements inside a <select> dropdown, and its label attribute supplies a bold heading rendered above that group of options, visually separating it from other groups in the same dropdown without changing how the dropdown behaves.
Note: Reach for optgroup once a select dropdown grows past roughly 10-15 options, since that is typically when unlabeled scanning starts to feel tedious.
Warning: The label attribute is required on optgroup; without it, the group renders with no visible heading, making the visual grouping pointless.
Example: Grouping Options with optgroup
<select>
<optgroup label="Fruits">
<option>Apple</option>
<option>Banana</option>
</optgroup>
</select>Disabling an Entire Group
Adding the disabled attribute to an optgroup grays out and disables every option inside that group at once, which is useful for temporarily hiding an entire category (like out-of-stock product types) without needing to disable each individual option one by one.
Note: Use a disabled optgroup to gray out a whole unavailable category at once instead of disabling each option inside it individually.
Warning: A disabled optgroup still displays its label and options visually (grayed out) -- it does not remove them from the dropdown, only prevents selection.
Example: Disabling an Entire Group
<select>
<optgroup label="Out of Stock" disabled>
<option>Grapes</option>
</optgroup>
</select>Pre-selecting an Option Within a Group
The selected attribute still works normally on an <option> nested inside an optgroup, exactly as it would on an ungrouped option -- grouping options does not change how default selection, form submission, or the option's value attribute behave.
Note: Test that your pre-selected default still makes sense visually once options are grouped -- a selected option buried in the third group can be easy for users to overlook.
Warning: Only one option can be selected by default across the whole select, even if that option sits inside a group among several optgroups.
Example: Pre-selecting an Option Within a Group
<select>
<optgroup label="Sizes">
<option>Small</option>
<option selected>Medium</option>
</optgroup>
</select>Multiple Groups in One Dropdown
A single select can contain any number of optgroup elements one after another, and can even mix grouped and ungrouped options -- options placed directly inside the select without a wrapping optgroup simply appear without a heading, alongside the labeled groups.
Note: Keep ungrouped "miscellaneous" options at the very top or bottom of the list so the visual structure of grouped vs. ungrouped stays predictable.
Warning: Mixing many small groups with only one or two options each can end up feeling more cluttered than a single ungrouped list -- group only when it genuinely aids scanning.
Example: Multiple Groups in One Dropdown
<select>
<optgroup label="Fruits">
<option>Apple</option>
</optgroup>
<optgroup label="Vegetables">
<option>Carrot</option>
</optgroup>
</select>Styling Optgroup Labels
Browsers apply a default bold style to the optgroup label automatically, and while dropdown internals are notoriously hard to style with CSS across browsers, the label text itself can usually be customized with basic font-weight and color properties targeting the optgroup selector, though rendering still varies by operating system.
Note: Test any custom optgroup styling across multiple browsers and operating systems, since native select dropdown rendering varies more than most other HTML elements.
Warning: Heavy CSS customization of select/optgroup internals is unreliable cross-browser -- for a fully custom-styled dropdown, many teams build a custom widget instead of styling the native select.
Example: Styling Optgroup Labels
<style>
optgroup {
font-weight: bold;
color: navy;
}
</style>
<select>
<optgroup label="Fruits">
<option>Apple</option>
</optgroup>
</select>- Nesting an optgroup inside another optgroup, which is not supported -- optgroup groups can only be one level deep.
- Forgetting the label attribute on optgroup, which leaves the group heading blank and defeats the purpose of grouping at all.
- Trying to make the optgroup label itself selectable -- it is a heading only, never a selectable option in the dropdown.
- optgroup wraps a set of related option elements inside a select dropdown, adding a bold, non-selectable label above them.
- The label attribute on optgroup is required and is what actually displays as the group heading.
- optgroup is purely visual organization -- it does not change the name/value pair submitted when a user picks an option inside it.
optgroup has been supported in every browser since the earliest days of HTML forms.
Chapter Quiz — Complete all 7 topics to unlock
0/7 topics done
Complete these topics first: