HTML <optgroup> Tag

The <optgroup> tag is used to group related options within a <select> dropdown list. It allows you to organize long lists of options into logical categories, making it easier for users to navigate and select the desired choice. This improves the user interface and overall experience when interacting with forms.

Syntax

<optgroup label="group_label" disabled>
  <option value="value1">Option 1</option>
  <option value="value2">Option 2</option>
  ...
</optgroup>

Attributes

Example

<select>
  <optgroup label="Fruits">
    <option value="apple">Apple</option>
    <option value="banana">Banana</option>
    <option value="orange">Orange</option>
  </optgroup>
  <optgroup label="Vegetables">
    <option value="carrot">Carrot</option>
    <option value="broccoli">Broccoli</option>
    <option value="spinach">Spinach</option>
  </optgroup>
</select>

More Examples

Using disabled Attribute

This example demonstrates how to disable an entire group of options using the disabled attribute. This is helpful when certain options are temporarily unavailable or irrelevant.

<select>
    <optgroup label="Available Options">
        <option value="option1">Option 1</option>
        <option value="option2">Option 2</option>
    </optgroup>
  <optgroup label="Unavailable Options" disabled>
    <option value="option3">Option 3</option>
    <option value="option4">Option 4</option>
  </optgroup>
</select>

Nested Option Groups (Not Recommended)

While technically browsers might render nested optgroups, it's not standard practice and can lead to unpredictable user experience. It's best to keep option groups at a single level. Avoid nesting as browsers have various interpretations of nested <optgroup> tags.

<select>
  <optgroup label="Primary Category">
    <option value="item1">Item 1</option>
    <!-- Avoid nested optgroups
    <optgroup label="Sub-Category"> 
        <option value="item1-a">Item 1-A</option>
    </optgroup> -->
    <option value="item2">Item 2</option>
  </optgroup>
</select>

Practical Example – Choosing a Car Model

A more real-world example where the <optgroup> helps users quickly locate the correct car make and model.

<label for="car-select">Choose a Car:</label>
<select id="car-select">
    <optgroup label="Toyota">
      <option value="camry">Camry</option>
      <option value="corolla">Corolla</option>
      <option value="rav4">RAV4</option>
    </optgroup>
    <optgroup label="Honda">
      <option value="civic">Civic</option>
      <option value="accord">Accord</option>
      <option value="crv">CR-V</option>
    </optgroup>
    <optgroup label="Ford">
      <option value="focus">Focus</option>
      <option value="f150">F-150</option>
      <option value="escape">Escape</option>
    </optgroup>
  </select>

Browser Support

Notes and Tips

• Use optgroup to improve the usability of long dropdown lists.
• Ensure the label attribute is clear and concise, describing the options within the group.
• Avoid nesting optgroup elements as it can lead to inconsistencies in rendering across different browsers and might confuse users.
• If you need more complex hierarchical selection, consider using a different UI pattern (e.g., cascading dropdowns) or JavaScript-based controls.
• Always test your form elements across different browsers and devices to ensure they work as expected.
• The disabled attribute is useful for showing options that aren't available at the moment, but be careful of overusing it; sometimes hiding options completely might be a better choice for a cleaner user interface.
• Keep the number of options within an optgroup manageable. If the groups become too large, consider splitting them into further groups or using a search feature.