← Back to HTML Course | Chapter 5: Forms | Lesson 7 of 7

HTML Optgroup

A long dropdown list of options -- like every country in the world, or every product category in a catalog -- becomes hard to scan once it grows past a dozen items. The optgroup element solves this by adding a labeled visual grouping inside a select dropdown, letting you organize related options under a bold heading without changing which option actually gets submitted.

In this page:

  1. Grouping Options with optgroup
  2. Disabling an Entire Group
  3. Pre-selecting an Option Within a Group
  4. Multiple Groups in One Dropdown
  5. Styling Optgroup Labels
Syntax
markup 
<select name="name">
  <optgroup label="Group label">
    <option value="value">Label</option>
  </optgroup>
</select>

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.
  • Accepted attributes:
  • label — required text shown for the group
  • disabled — boolean
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

markup 
<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.
  • Accepted values:
  • disabled — boolean attribute on optgroup
  • Disables all contained options
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

markup 
<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.
  • Accepted values:
  • selected — boolean attribute on option
  • Only one selected option in a single-select
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

markup 
<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

markup 
<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

markup 
<style>
  optgroup {
    font-weight: bold;
    color: navy;
  }
</style>
<select>
  <optgroup label="Fruits">
    <option>Apple</option>
  </optgroup>
</select>
Live Example
Related Topics

HTML Input Form Attributes · HTML Input Attributes · HTML Input Types · HTML Form Elements

{# common_mistakes/chapter_summary/browser_support: on Hindi pages the view already swaps in the hi_ translation fields (or blanks these out if untranslated), so this renders correctly for both languages without a lang_code check here. #}
Common Mistakes
  1. Nesting an optgroup inside another optgroup, which is not supported -- optgroup groups can only be one level deep.
  2. Forgetting the label attribute on optgroup, which leaves the group heading blank and defeats the purpose of grouping at all.
  3. Trying to make the optgroup label itself selectable -- it is a heading only, never a selectable option in the dropdown.
Chapter Summary
  • 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.
Browser Support

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:

← Previous Lesson HTML Form Elements Next Lesson → HTML Input Types

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.