<optgroup> Element

Technical Summary

Definition / Categories

Item	Specification summary
Meaning	A group of option elements with a common label
Categories	None
Context	A descendant of select
Content model	Zero or one legend, followed by zero or more option, script-supporting, noscript, or div elements
Content attributes	disabled, label, and global attributes
DOM interface	HTMLOptGroupElement, with disabled and label

The current content model includes the position of legend relevant to customizable select. For the conventional select pattern used widely in authoring, the basic form is a label attribute followed by option elements.

Group boundary

An optgroup's group consists of its descendant option elements. User agents are expected to present options in the same group as related to each other and separate from other options.

<label for="format">Format</label>
<select id="format" name="format">
  <optgroup label="Documents">
    <option value="html">HTML</option>
    <option value="markdown">Markdown</option>
  </optgroup>
  <optgroup label="Data">
    <option value="json">JSON</option>
  </optgroup>
</select>

The group label and an option's label are different pieces of information. The selected option's value participates in the form entry list; the optgroup label does not.

Label resolution

The UI label for an optgroup is resolved by the current HTML Standard's label algorithm. The precedence between legend in a customizable select and the conventional label attribute is an important boundary.

Condition	Group-label resolution	Scope to verify
First element child is legend	The legend's HTML-aware text content	Group caption in a customizable select
No child legend, with a label attribute	The label attribute's value	Conventional select authoring
Neither is present	The empty string	The label attribute is required when no child legend exists

<select name="component">
  <optgroup label="Standard elements">
    <option value="button">button</option>
  </optgroup>
</select>

For a conventional select, specify label explicitly when naming a group. The text of an option is not a substitute for the group label.

Legend and grouping in a customizable select

The current content model permits zero or one legend as the first element child of an optgroup, followed by its option content. When that first child is a legend, its HTML-aware text supplies the group label and takes precedence over the label attribute. If there is no child legend, the label attribute is required. The group still organizes options; it is not itself an option.

<select name="fruit">
  <button type="button">
    <selectedcontent></selectedcontent>
  </button>
  <div class="option-group">
    <optgroup>
      <legend>Fruit</legend>
      <option value="apple"><img src="apple.svg" alt="">Apple</option>
      <option value="pear"><img src="pear.svg" alt="">Pear</option>
    </optgroup>
  </div>
</select>

The standard defines legend as a child of optgroup, while selectedcontent copies the selected option's child nodes. From those two rules, the group legend is not part of the content copied into the select's button. The legend labels the group in the picker; it does not become the submitted option value. The select page describes the first-child button, selectedcontent update, and base-select styling hook; the option page covers the child's content model.

Disabled boundary

disabled is a boolean attribute. Setting it on an optgroup disables its options as a group. An option's own disabled IDL value can remain false while the option is effectively :disabled because it is inside a disabled group; these are separate observations.

<select name="plan">
  <optgroup label="Available">
    <option value="basic">Basic</option>
  </optgroup>
  <optgroup label="Discontinued" disabled>
    <option value="legacy">Legacy plan</option>
  </optgroup>
</select>

Target	Own attribute	Effective state
optgroup	disabled=true	Its disabled boundary affects the options in the group
option without own disabled	option.disabled=false	Matches :disabled inside a disabled optgroup and cannot be selected by the user
option with own disabled	option.disabled=true	Cannot be selected because of its own disabled state

Form submission and option list

The optgroup is not a submittable form control and does not contribute a form value. The parent select creates the entry list from its selected options. The group label and disabled state are metadata and selection boundaries, not submitted values.

In the select's option list, the optgroup supplies structure for related choices. Only options can be selected; there is no standalone optgroup selection state or optgroup-only FormData entry.

DOM Interface

The optgroup element is exposed as HTMLOptGroupElement. It is not an element with a form owner or a value; its API exposes the group label and its own disabled attribute.

const group = document.querySelector('optgroup');

group.label;
group.disabled;
group.matches(':disabled');
group.querySelectorAll('option');

API	Summary	Boundary
label	Reflects the label attribute	The UI label algorithm has a boundary when a legend is present
disabled	Reflects the optgroup's own disabled attribute	Keep it separate from an option's effective disabled state
querySelectorAll('option')	Retrieves options in the group	Selection and submission follow the option and select models

Fact / Evidence

Normative definitions, label resolution, disabled boundaries, and form relations are recorded as claims with conditions and source locations. Browser implementation and accessibility-tree observations are separated into Implementation Evidence below.

Evidence

1. HTML Standard: The optgroup element — context, content model, label, disabled, selection boundary, and DOM interface
2. HTML Standard: The select element — option list, select submission, and customizable-select relations
3. HTML Standard: The option element — option disabledness, selection state, value, and optgroup boundary
4. HTML Standard: The legend element — group labeling for optgroup in customizable select
5. HTML Standard: The selectedcontent element — selected option children shown in the select button
6. HTML Accessibility API Mappings — optgroup group mapping and platform API entry points
7. Web Platform Tests: select element — related select, option, and optgroup tests

Implementation Evidence

Browser implementation, WPT, and accessibility observations are recorded separately from normative claims. Unrun items are not treated as reviewed.

Shared fixture / record: Fixture ID forms-core-v1 covers a disabled optgroup in select, the boundary between group disabledness and an option's own disabled attribute, FormData through select, and option :disabled state. Chrome 152.0.0.0 / Windows 10 / checked 2026-09-15. All 14 checks passed.

This IMPL record is a Chrome-only DOM and form-API observation using the existing shared fixture. It is not registered as a cross-browser result until WPT-specific results, direct optgroup accessibility observations, and browser comparisons are available.

Coverage / Open Issues

• ReviewedMeaning, context, content model, label and disabled attributes, and HTMLOptGroupElement IDL
• ReviewedOptgroup/option selection boundary, select FormData relation, and disabled-group specification boundary
• OpenOptgroup-specific WPT results and multi-browser comparison of disabledness, labels, nested option lists, and legend precedence
• ReviewedCustomizable-select optgroup content model, first-child legend label precedence, and the boundary between a group legend and selectedcontent
• OpenRendering and keyboard interaction in conventional versus customizable select, including the platform exposure of optgroup legend
• OpenComplete HTML-AAM mapping, platform APIs, and assistive-technology announcements for group labels

This is initial coverage. It records the scope checked in one Chrome environment; it does not claim identical rendering, interaction, or accessibility-API results across all browsers, nor complete verification of the optgroup element.

Related surface

For a beginner-friendly explanation of grouping, label, and disabled, see optgroup in Yugien. For the selection model as a whole, see select; for individual choices and selectedness, see option; and for legend inside customizable select, see legend.