<optgroup>要素

Technical Summary

Definition / Categories

項目	仕様上の整理
意味	共通のlabelを持つoptionのグループ
Categories	なし
Context	selectの子孫
Content model	0個または1個のlegendに続く、0個以上のoption、script-supporting要素、noscript、div
Content attributes	disabled、label、およびglobal attributes
DOM interface	HTMLOptGroupElement。disabledとlabelを持つ

現行仕様のcontent modelには、customizable selectで関係するlegendの位置が含まれます。従来から広く使われる通常のselectでは、label属性とoptionの組み合わせが基本形です。

Group boundary

optgroupのグループは、その要素の子孫であるoptionから構成されます。ユーザーエージェントは、同じグループに属するoptionを、他のoptionと関係付けて表示することが期待されます。

<label for="format">形式</label>
<select id="format" name="format">
  <optgroup label="文書">
    <option value="html">HTML</option>
    <option value="markdown">Markdown</option>
  </optgroup>
  <optgroup label="データ">
    <option value="json">JSON</option>
  </optgroup>
</select>

グループのlabelとoptionのlabelは別の情報です。送信されるのは選択されたoptionの値であり、optgroupのlabelはselectのentry listに追加されません。

Label resolution

optgroupのUI上のlabelは、現行HTML Standardのlabel algorithmで解決されます。customizable selectにおけるlegendと、通常のlabel属性の優先関係を分けて扱う必要があります。

条件	グループlabelの解決	確認範囲
最初のelement childがlegend	そのlegendのHTML-aware text content	customizable selectのgroup caption
child legendがなくlabel属性がある	label属性の値	通常のselectで使う基本構文
どちらもない	空文字列	child legendがない場合はlabel属性が必要

<select name="component">
  <optgroup label="標準要素">
    <option value="button">button</option>
  </optgroup>
</select>

通常のselectでグループ名を示すときは、label属性を明示します。optionのテキストはグループlabelの代わりにはなりません。

Customizable selectでのlegendとグループ化

現行のcontent modelでは、optgroupの最初のelement childとして0個または1個のlegendを置き、その後ろにoption内容を並べられます。先頭のlegendがある場合、そのHTML-aware textがgroup labelになり、label属性より優先されます。child legendがない場合はlabel属性が必要です。グループはoptionをまとめますが、グループ自体はoptionではありません。

<select name="fruit">
  <button type="button">
    <selectedcontent></selectedcontent>
  </button>
  <div class="option-group">
    <optgroup>
      <legend>果物</legend>
      <option value="apple"><img src="apple.svg" alt="">りんご</option>
      <option value="pear"><img src="pear.svg" alt="">洋なし</option>
    </optgroup>
  </div>
</select>

仕様ではlegendはoptgroupの子であり、selectedcontentは選択中optionの子ノードを複製します。この2つの関係から、グループのlegendはselect buttonへ複製されるoption子要素に含まれません。legendはpicker内でグループ名を示し、フォーム送信値にはなりません。先頭button・selectedcontentの更新・base-selectによるスタイリングはselectページ、optionの子要素制限はoptionページを参照してください。

Disabled boundary

disabledはboolean attributeです。optgroupに指定すると、グループに含まれるoptionをまとめて無効にできます。option自身のdisabled IDL属性がfalseでも、disabledなoptgroupの影響で実効的に:disabledとなる境界を、属性値と状態に分けて確認します。

<select name="plan">
  <optgroup label="提供中">
    <option value="basic">ベーシック</option>
  </optgroup>
  <optgroup label="提供終了" disabled>
    <option value="legacy">旧プラン</option>
  </optgroup>
</select>

対象	自身の属性	実効状態
optgroup	disabled=true	グループ内optionへdisabledの影響を与える
option（自身のdisabledなし）	option.disabled=false	disabled optgroup内なら:disabledに一致し、ユーザー選択できない
option（自身のdisabledあり）	option.disabled=true	自分自身のdisabled状態で選択できない

Form submission and option list

optgroupはフォーム送信値を持つsubmittable controlではありません。選択されたoptionをentry listへ反映するのは親のselectです。optgroupのlabelやdisabled状態は、選択値そのものとは別の情報です。

selectのoption listでは、optgroupは選択肢を整理する構造として関係します。選択できる対象はoptionだけで、optgroupを直接選択する状態や、optgroup単独のFormData entryはありません。

DOM Interface

optgroup要素はHTMLOptGroupElementとして公開されます。フォームのownerやvalueを持つ要素ではなく、属性を通じてグループのlabelとdisabledを扱います。

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

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

API	概要	注意点
label	label属性を反映する文字列	UI上のgroup label algorithmの結果とは、legendがある場合に境界がある
disabled	optgroup自身のdisabled属性を反映するboolean	子optionの実効的なdisabled状態とは分けて扱う
querySelectorAll('option')	グループ内のoptionを取得する	取得したoptionの選択・送信規則はoptionとselectに従う

Fact / Evidence（主張 / 根拠）

仕様上の定義、label解決、disabled境界、フォームとの関係を、主張・条件・根拠位置に分けて記録します。ブラウザー実装とアクセシビリティツリーの観測は、下のImplementation Evidenceへ分離しています。

Evidence

1. HTML Standard: The optgroup element — context、content model、label、disabled、selection boundary、DOM interface
2. HTML Standard: The select element — option list、selectのsubmission、customizable selectとの関係
3. HTML Standard: The option element — optionのdisabled、選択状態、値、optgroup境界
4. HTML Standard: The legend element — customizable select内optgroupのgroup label
5. HTML Standard: The selectedcontent element — select button内に表示される選択中optionの子要素
6. HTML Accessibility API Mappings — optgroupのgroup mappingとplatform APIの確認入口
7. Web Platform Tests: select element — select、option、optgroupの関連テスト群の入口

Implementation Evidence

仕様上の主張とは別に、ブラウザー実装・WPT・アクセシビリティ観測を記録します。未実施の項目は確認済みとは扱いません。

共通fixture / 記録: fixture ID forms-core-v1で、select内のdisabled optgroup、option自身のdisabled属性との境界、select経由のFormData、optionの:disabled状態を確認しました。Chrome 152.0.0.0 / Windows 10 / 確認日 2026-09-15。14項目中14項目がpassです。

今回のIMPLは既存のフォーム共通fixtureによるChrome 1環境のDOM・フォームAPI実測です。WPTの個別結果、optgroup自身のAX観測、複数ブラウザー比較が揃うまでは、すべての実装に共通する結果として登録しません。

Coverage / Open Issues

• 確認済みoptgroupの意味、context、content model、label・disabled属性、HTMLOptGroupElementのIDL
• 確認済みoptgroupとoptionの選択境界、selectのFormDataとの関係、disabled groupの仕様上の境界
• 未完了optgroup固有WPT、disabled・label・nested option list・legend優先順位の複数ブラウザー比較
• 仕様確認済みcustomizable selectにおけるoptgroup content model、先頭legendのlabel優先順位、group legendとselectedcontentの境界
• 未完了通常selectとcustomizable select間の表示・keyboard操作、optgroup legendのplatform accessibility exposure
• 未完了HTML-AAMの全mapping、platform API、支援技術ごとのgroup label読み上げ

このページは初期Coverageです。Chrome 1環境で確認した範囲を示すものであり、すべてのブラウザーで同じ表示・操作・アクセシビリティAPI結果になること、またはoptgroup要素全体の検証が完了したことを主張しません。

Related surface

初心者向けのグループ化とlabel・disabledの使い方はYugienのoptgroup要素ページを参照してください。選択モデル全体はselect要素、個別の候補とselectednessはoption要素、customizable select内のlegendはlegend要素でも確認できます。