References

Beginner-friendly references for web development, with live, editable examples.

The HTML <optgroup> tag

Element All modern browsers Updated
Quick answer

The HTML <optgroup> element groups related <option> elements inside a <select> under a heading set by its label attribute.

Overview

The <optgroup> element organizes a long <select> drop-down into labeled sections, making a big list easier to scan. Its label attribute supplies the section heading.

The heading itself is not selectable — it is a divider, not a choice — and you can disable an entire group at once with the disabled attribute. One structural limit to know: option groups cannot be nested inside one another.

Syntax

<optgroup label="Citrus">
  <option>Orange</option>
  <option>Lemon</option>
</optgroup>

Attributes

The <optgroup> element supports the following attributes, in addition to the global attributes available to every HTML element.

Attribute Value Description
disabled A boolean attribute — present or absent. Disables a form control.
label A string of label text. Labels an option group or option.

Example

Live example 
<select>
  <optgroup label="Fruit"><option>Apple</option><option>Pear</option></optgroup>
  <optgroup label="Veg"><option>Carrot</option></optgroup>
</select>

Best practices

  • Use <optgroup> to break long drop-downs into labeled, scannable sections.
  • Set the section heading with the required label attribute.
  • Disable a whole group at once with the disabled attribute.
  • Remember option groups cannot be nested — keep the structure one level deep.

Frequently asked questions

How do I group options in a drop-down?
Wrap related <option> elements in an <optgroup> and set its label attribute as the heading.
Is the optgroup label selectable?
No. The label is a non-selectable heading that visually separates the group.
Can I nest optgroups?
No. Option groups cannot contain other option groups — the structure is limited to one level.
How do I disable a whole group of options?
Add the disabled attribute to the <optgroup>; every option inside becomes unavailable.
ol option