<optgroup> - option grouping

The <optgroup> tag is used to create option groups within a <select> element, improving the readability and user experience of dropdown menus through logical grouping. It defines the group name via the label attribute and does not support nesting, but the group's appearance can be further enhanced with CSS.

Basic Syntax of <optgroup>

The <optgroup> must be nested within a <select> element and contain one or more <option> child elements. Its core attribute is label, which defines the display name of the group. The basic structure is as follows:

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

Common Attributes of <optgroup>

The <optgroup> supports the following key attributes:

1. label (required): Defines the title of the group and cannot be omitted.
2. disabled: Disables the entire group, making all options within it unselectable.
3. class/id: Used for CSS or JavaScript manipulation.

Example: Disabling a group

<select>
  <optgroup label="Fruits" disabled>
    <option value="apple">Apple</option>
    <option value="banana">Banana</option>
  </optgroup>
</select>

Practical Examples

Basic Grouping

Here’s a dropdown menu for food items grouped by category:

<select>
  <optgroup label="Fruits">
    <option value="apple">Apple</option>
    <option value="orange">Orange</option>
  </optgroup>
  <optgroup label="Vegetables">
    <option value="carrot">Carrot</option>
    <option value="tomato">Tomato</option>
  </optgroup>
</select>

Dynamic Group Generation

Creating groups dynamically with JavaScript:

const select = document.createElement('select');
const group = document.createElement('optgroup');
group.label = 'Dynamic Group';
group.appendChild(new Option('Option A', 'a'));
select.appendChild(group);
document.body.appendChild(select);

Styling Tips

Although <optgroup> has limited styling options, its appearance can be enhanced with CSS:

optgroup {
  font-weight: bold;
  color: #333;
}
optgroup option {
  font-weight: normal;
  padding-left: 20px;
}

Notes

1. No Nesting: <optgroup> cannot contain other <optgroup> elements.
2. Mobile Compatibility: Some mobile devices may ignore group styling.
3. Form Submission: Only the selected <option> values are submitted; group labels do not affect data.

Advanced Usage: Combining with <datalist>

Although <datalist> does not support <optgroup>, similar effects can be simulated:

<input list="food-list" placeholder="Search for food">
<datalist id="food-list">
  <option value="Apple" data-group="Fruits"></option>
  <option value="Carrot" data-group="Vegetables"></option>
</datalist>

Then use CSS pseudo-elements to display group labels:

option::before {
  content: attr(data-group) " - ";
  color: gray;
}

Interaction with Other Form Elements

The following example demonstrates how to control other form fields based on <optgroup> selection:

<select id="category">
  <option value="">--Select Category--</option>
  <optgroup label="Electronics">
    <option value="phone">Phone</option>
    <option value="laptop">Laptop</option>
  </optgroup>
</select>

<select id="sub-options" disabled>
  <!-- Dynamically populate sub-options -->
</select>

<script>
  document.getElementById('category').addEventListener('change', function() {
    const subSelect = document.getElementById('sub-options');
    subSelect.disabled = !this.value;
    // Add dynamic loading logic here
  });
</script>

Accessibility Recommendations

1. Ensure group labels have clear semantics.
2. Add ARIA attributes for screen readers:

<optgroup label="Beverages" aria-label="Drink Categories">
  <option value="tea">Tea</option>
</optgroup>