Path // www.yourhtmlsource.com → Reference → <optgroup>

<optgroup>

by Ross Shannon

The <optgroup> element creates a grouping of <option> elements within a <select> element. It provides a way to categorize options into logical sections, making long dropdown lists easier to navigate and understand. The group label is displayed as a non-selectable heading above its options.

Clock This page was last updated on 2025-11-17


Syntax

<optgroup label="Group Name">
  <option value="value1">Option 1</option>
  <option value="value2">Option 2</option>
</optgroup>

The element requires both opening and closing tags. The label attribute is required and provides the group heading that users see. The optgroup element must contain one or more <option> elements.

Attributes

  • label (required) - The text displayed as the group heading. This text is not selectable.
  • disabled - Disables all options within the group (all become unselectable)
  • Global attributes - Supports standard attributes like id, class, style

Examples

Categorized Product Selection

<label for="product">Choose a product:</label>
<select id="product" name="product">
  <optgroup label="Electronics">
    <option value="phone">Smartphone</option>
    <option value="laptop">Laptop</option>
    <option value="tablet">Tablet</option>
  </optgroup>
  <optgroup label="Accessories">
    <option value="case">Phone Case</option>
    <option value="charger">Charger</option>
    <option value="headphones">Headphones</option>
  </optgroup>
</select>

Geographic Regions

<label for="city">Select a city:</label>
<select id="city" name="city">
  <optgroup label="North America">
    <option value="nyc">New York</option>
    <option value="la">Los Angeles</option>
    <option value="toronto">Toronto</option>
  </optgroup>
  <optgroup label="Europe">
    <option value="london">London</option>
    <option value="paris">Paris</option>
    <option value="berlin">Berlin</option>
  </optgroup>
</select>

Disabled Group

<select id="service" name="service">
  <optgroup label="Available Plans">
    <option value="basic">Basic - $9/month</option>
    <option value="standard">Standard - $19/month</option>
  </optgroup>
  <optgroup label="Coming Soon" disabled>
    <option value="premium">Premium - $29/month</option>
    <option value="enterprise">Enterprise - Custom</option>
  </optgroup>
</select>

When to Use

Use the <optgroup> element when:

  • Organizing a long list of options into logical categories
  • Options naturally fall into distinct groups (regions, types, categories)
  • Improving usability by providing visual structure to dropdown menus
  • Making it easier for users to find options in lengthy lists
  • Temporarily disabling entire categories of options

Accessibility and best practices:

  • Use descriptive label attributes that clearly identify the group
  • Keep group labels concise but meaningful
  • Ensure logical grouping that makes sense to users
  • Screen readers announce the group label when users navigate into a group
  • Avoid nesting optgroups (not supported in HTML5)
  • Consider the order of groups - most relevant or common first
  • Use disabled groups sparingly and provide context for why they're unavailable
  • Test with keyboard navigation to ensure all groups are accessible
  • <select> - Parent container for optgroup elements
  • <option> - Individual options within each group
  • <form> - Parent form container
  • <label> - Labels for the select element
  • <fieldset> - Groups form controls with a visible border