Coding and programming reference site

Tag optgroup

The <optgroup> element in HTML is used to group related <option> elements inside a <select> dropdown. It improves accessibility, organization, and user experience, especially in long or categorized selection menus.

📌 What Is the `<optgroup>` Tag?

<optgroup> stands for “option group”
It allows you to label a set of related <option> elements
Browsers display these as labeled categories within a dropdown

✅ Syntax

<select>
  <optgroup label="Fruits">
    <option>Apple</option>
    <option>Banana</option>
  </optgroup>
  <optgroup label="Vegetables">
    <option>Carrot</option>
    <option>Spinach</option>
  </optgroup>
</select>

🟢 This will display:

▼ Select
 ├── Fruits
 │     ├─ Apple
 │     └─ Banana
 └── Vegetables
       ├─ Carrot
       └─ Spinach

🔍 Diagram of Structure

<select>
 ├─ <optgroup label="...">
 │     ├─ <option>...</option>
 │     └─ ...
 └─ <optgroup>...</optgroup>
</select>

💡 Why Use `<optgroup>`?

Benefit	Description
Better usability	Easier for users to find items in large lists
Semantic clarity	Improves accessibility (screen readers read labels)
Visual grouping	Categories displayed as labeled sections
Professional UI	Enhances form presentation

🎨 Attributes

Attribute	Description	Example
`label`	Required. Sets the category name	`<optgroup label="Asia">`
`disabled`	Optional. Disables the entire group	`<optgroup disabled>`

🧪 Example 1: Basic Country Selection

<select>
  <optgroup label="Europe">
    <option>France</option>
    <option>Germany</option>
  </optgroup>
  <optgroup label="Asia">
    <option>Japan</option>
    <option>India</option>
  </optgroup>
</select>

🧪 Example 2: Disabled Group

<select>
  <optgroup label="Available Plans">
    <option>Basic</option>
    <option>Pro</option>
  </optgroup>
  <optgroup label="Unavailable Plans" disabled>
    <option>Enterprise</option>
    <option>Legacy</option>
  </optgroup>
</select>

🚫 “Unavailable Plans” will appear grayed out and not selectable.

📜 Accessibility Notes

✅ The label is announced by screen readers, so it enhances navigability
✅ <optgroup> creates logical grouping, which is essential for users with cognitive disabilities

🔧 Styling Tips (CSS)

While styling <select> and <optgroup> is limited by the browser, you can still apply basic adjustments:

select {
  font-size: 16px;
  padding: 8px;
}

Browsers handle group indentation and labels automatically.

❌ Limitations

No nesting of <optgroup> allowed
Limited styling capabilities
Not supported inside <datalist>

🔁 `<optgroup>` vs `<option>`

Feature	`<optgroup>`	`<option>`
Groups items?	✅ Yes	❌ No
Selectable?	❌ No (only labels options)	✅ Yes
Has a `label`?	✅ Required	❌ Uses text content

🏁 Conclusion

The <optgroup> tag is a powerful tool to organize long dropdowns into logical sections. Whether you’re building a country picker, a settings menu, or a form with grouped options, <optgroup> improves usability, accessibility, and visual structure.

💡 Always use <optgroup> when your options fall into categories — your users will appreciate the clarity!

Design by ThemesDNA.com

📌 What Is the <optgroup> Tag?