<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.

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 Accessibility API Mappings — optgroup group mapping and platform API entry points
6. 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, and option lists
• OpenRendering in conventional versus customizable select, optgroup legend, and first-legend label resolution
• 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.