HTML <optgroup> Element

Publish in HTML Tutorial el 25/05/2025 14:12

The <optgroup> HTML element creates a grouping of options within a <select> dropdown menu. It provides a way to organize related options under a common label, making long dropdown lists more user-friendly and easier to navigate.

Key characteristics:

Must be used inside a <select> element
Contains one or more <option> elements
Has a label attribute that displays as a non-selectable heading
Improves accessibility by semantically grouping related options

Basic Syntax

Rendered Example

Play Code

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

Examples

1. Basic Grouping

A simple example grouping countries by continents:

Play Code

<select>
  <optgroup label="Europe">
    <option>France</option>
    <option>Germany</option>
    <option>Spain</option>
  </optgroup>
  <optgroup label="America">
    <option>USA</option>
    <option>Canada</option>
    <option>Brazil</option>
  </optgroup>
</select>

2. Disabled Option Group

Showing how to disable an entire group of options:

Play Code

<select>
  <optgroup label="Available Colors">
    <option>Red</option>
    <option>Green</option>
    <option>Blue</option>
  </optgroup>
  <optgroup label="Out of Stock" disabled>
    <option>Yellow</option>
    <option>Purple</option>
  </optgroup>
</select>

3. Nested Styling (with JavaScript)

Using JavaScript to style options based on their group:

Play Code

<select id="styled-select">
  <optgroup label="Priority">
    <option>High</option>
    <option>Medium</option>
    <option>Low</option>
  </optgroup>
</select>

<script>
  document.getElementById('styled-select').addEventListener('change', function() {
    const options = this.options;
    for (let i = 0; i < options.length; i++) {
      if (options[i].text === 'High') {
        options[i].style.color = 'red';
        options[i].style.fontWeight = 'bold';
      } else if (options[i].text === 'Low') {
        options[i].style.color = 'gray';
      }
    }
  });
</script>

4. Dynamic Group Creation (JavaScript)

Creating option groups dynamically with JavaScript:

Play Code

<select id="dynamic-select"></select>

<script>
  const select = document.getElementById('dynamic-select');
  const categories = {
    'Fruits': ['Apple', 'Banana', 'Orange'],
    'Vegetables': ['Carrot', 'Broccoli', 'Spinach']
  };

  for (const category in categories) {
    const group = document.createElement('optgroup');
    group.label = category;
    
    categories[category].forEach(item => {
      const option = document.createElement('option');
      option.text = item;
      group.appendChild(option);
    });
    
    select.appendChild(group);
  }
</script>

5. Multiple Select with Groups

Using optgroup with a multiple selection dropdown:

Play Code

<select multiple size="5">
  <optgroup label="Frontend">
    <option>HTML</option>
    <option>CSS</option>
    <option>JavaScript</option>
  </optgroup>
  <optgroup label="Backend">
    <option>Node.js</option>
    <option>PHP</option>
    <option>Python</option>
  </optgroup>
</select>

Tips and Tricks

Accessibility: Always include meaningful labels for your optgroups to help screen reader users.
Styling: While you can style the <option> elements, browser support for styling <optgroup> labels is limited.
Performance: For very long lists, consider dynamically loading optgroups based on user interaction.
Mobile: Test your grouped selects on mobile devices as the rendering might differ from desktop browsers.
Fallback: If you need complex styling, consider using a custom dropdown component that mimics select/optgroup behavior.