← Back to All Tags

<optgroup>

Defines a group of related options in a select list

Definition and Usage

The <optgroup> tag is used to group related options in a <select> element (dropdown list).

If you have a long list of options, groups of related options are easier to navigate for the user.

Common use cases for <optgroup>:

  • Grouping countries by continent
  • Organizing products by category
  • Grouping file types by format
  • Categorizing time zones by region
  • Sorting items by department or division
Tip: The label attribute is required and specifies the group heading that appears in the dropdown.
Note: Screen readers announce optgroup labels, making dropdowns more accessible for users with disabilities.

Browser Support

The <optgroup> tag is supported in all major browsers:

Chrome
Chrome
Yes
Firefox
Firefox
Yes
Safari
Safari
Yes
Edge
Edge
Yes
Opera
Opera
Yes

Attributes

Attribute Value Description
label text Required. Specifies a label for the option group (displayed as the group heading)
disabled disabled Specifies that an option group should be disabled (grayed out and not selectable)

Examples

Basic Select with Optgroups

Group options by category:

Example

<label for="cars">Choose a car brand:</label>
<select id="cars" name="cars">
  <optgroup label="German Cars">
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
    <option value="bmw">BMW</option>
  </optgroup>
  <optgroup label="Japanese Cars">
    <option value="toyota">Toyota</option>
    <option value="honda">Honda</option>
    <option value="nissan">Nissan</option>
  </optgroup>
  <optgroup label="American Cars">
    <option value="ford">Ford</option>
    <option value="chevrolet">Chevrolet</option>
    <option value="tesla">Tesla</option>
  </optgroup>
</select>

Disabled Optgroup

Disable an entire group of options:

Example

<label for="products">Select a product:</label>
<select id="products" name="products">
  <optgroup label="Available Products">
    <option value="laptop">Laptop</option>
    <option value="phone">Smartphone</option>
    <option value="tablet">Tablet</option>
  </optgroup>
  <optgroup label="Out of Stock" disabled>
    <option value="monitor">Monitor</option>
    <option value="keyboard">Keyboard</option>
    <option value="mouse">Mouse</option>
  </optgroup>
</select>

Countries by Continent

Organize countries into continental groups:

Example

<label for="country">Choose your country:</label>
<select id="country" name="country">
  <optgroup label="North America">
    <option value="us">United States</option>
    <option value="ca">Canada</option>
    <option value="mx">Mexico</option>
  </optgroup>
  <optgroup label="Europe">
    <option value="uk">United Kingdom</option>
    <option value="de">Germany</option>
    <option value="fr">France</option>
    <option value="es">Spain</option>
  </optgroup>
  <optgroup label="Asia">
    <option value="jp">Japan</option>
    <option value="cn">China</option>
    <option value="in">India</option>
    <option value="kr">South Korea</option>
  </optgroup>
</select>

Styled Select Dropdown

Apply custom styling to select with optgroups:

Example

<style>
  .styled-select {
    width: 300px;
    padding: 10px;
    font-size: 16px;
    border: 2px solid #745af2;
    border-radius: 8px;
    background-color: var(--bg-primary);
    cursor: pointer;
  }

  .styled-select:focus {
    outline: none;
    border-color: #5a3fd8;
    box-shadow: 0 0 0 3px rgba(116, 90, 242, 0.1);
  }
</style>

<select class="styled-select">
  <optgroup label="Fruits">
    <option>Apple</option>
    <option>Banana</option>
    <option>Orange</option>
  </optgroup>
  <optgroup label="Vegetables">
    <option>Carrot</option>
    <option>Broccoli</option>
    <option>Spinach</option>
  </optgroup>
</select>

File Type Selection

Group file formats by type:

Example

<label for="filetype">Select file format:</label>
<select id="filetype" name="filetype">
  <optgroup label="Image Formats">
    <option value="jpg">JPEG (.jpg)</option>
    <option value="png">PNG (.png)</option>
    <option value="gif">GIF (.gif)</option>
    <option value="svg">SVG (.svg)</option>
  </optgroup>
  <optgroup label="Document Formats">
    <option value="pdf">PDF (.pdf)</option>
    <option value="doc">Word (.doc)</option>
    <option value="txt">Text (.txt)</option>
  </optgroup>
  <optgroup label="Video Formats">
    <option value="mp4">MP4 (.mp4)</option>
    <option value="webm">WebM (.webm)</option>
    <option value="avi">AVI (.avi)</option>
  </optgroup>
</select>

Complete Form Example

Use optgroups in a registration form:

Example

<form>
  <label for="department">Select Department:</label>
  <select id="department" name="department" required>
    <option value="">-- Choose Department --</option>
    <optgroup label="Engineering">
      <option value="frontend">Frontend Development</option>
      <option value="backend">Backend Development</option>
      <option value="devops">DevOps</option>
    </optgroup>
    <optgroup label="Design">
      <option value="ux">UX Design</option>
      <option value="ui">UI Design</option>
      <option value="graphic">Graphic Design</option>
    </optgroup>
    <optgroup label="Business">
      <option value="sales">Sales</option>
      <option value="marketing">Marketing</option>
      <option value="hr">Human Resources</option>
    </optgroup>
  </select>
  <button type="submit">Submit</button>
</form>

Styling Limitations

It's important to understand the styling limitations of <optgroup>:

  • Browser default styling varies significantly across different browsers
  • Limited CSS customization options for optgroup labels
  • Cannot change optgroup label font weight in most browsers
  • Background color styling is inconsistent across browsers
  • Some browsers prevent custom styling of the dropdown entirely
Alternative: For heavily customized dropdowns, consider using JavaScript libraries like Select2, Choices.js, or building a custom dropdown with <div> elements.

Accessibility Benefits

Using <optgroup> improves accessibility in several ways:

  • Screen Readers: Announce group labels before reading options, providing context
  • Keyboard Navigation: Users can jump between groups more easily
  • Visual Organization: Reduces cognitive load by grouping related items
  • Semantic Meaning: Adds structure and meaning to long dropdown lists
  • Better UX: Makes finding the right option faster and easier

Try it Yourself

Interactive Example

Try this interactive optgroup example:

Best Practices

  • Use meaningful, descriptive labels that clearly identify each group
  • Group options logically based on user needs and mental models
  • Keep groups relatively balanced in size (avoid one huge group and several tiny ones)
  • Consider alphabetical ordering within groups for easier scanning
  • Use the disabled attribute to show unavailable groups while maintaining visibility
  • Always include the label attribute (it's required)
  • For very long lists (50+ items), consider alternative UI patterns like autocomplete
  • Test with screen readers to ensure proper accessibility
  • Provide a default "Please select" option before the first optgroup

When to Use Optgroup

Use Optgroup When:

  • You have 10+ options in a select
  • Options have clear categories
  • Users benefit from grouped context
  • Categories are well-known to users

Don't Use Optgroup When:

  • You have fewer than 10 options
  • Options don't have natural groups
  • Heavy customization is needed
  • Categories would confuse users

Related Tags

  • <select>

    Defines a dropdown list

  • <option>

    Defines an option in a select list

  • <datalist>

    Defines pre-defined options for input

  • <label>

    Defines a label for form elements

  • <form>

    Defines an HTML form