<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 and standards

Browser rendering and modern HTML conformance are different questions. Check the current element reference for the browsers and features your project needs; the older source version table is not a current compatibility guarantee.

Read the MDN element reference

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

Approved-page light CSS-variable defaults are supplied: --bg-primary. The snippet includes CSS inside its HTML.

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

Select Your Favorite Technology:

Try in Code Playground

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