optgroup要素の使い方

HTMLのoptgroup要素は、selectの選択肢を意味の近いグループに分けるために使います。候補が多いときに、ユーザーが目的の選択肢を見つけやすくする要素です。

先に結論

最小の例

<label for="language">言語</label>
<select id="language" name="language">
  <optgroup label="マークアップ">
    <option value="html">HTML</option>
  </optgroup>
  <optgroup label="プログラミング">
    <option value="javascript">JavaScript</option>
  </optgroup>
</select>

selectにラベルを付け、optgroupで選択肢を分類します。送信されるのはグループ名ではなく、選択されたoptionの値です。

送信ボタンを押すと、このページにGETで送信され、選んだoptionのvalueがURLのクエリに入ります。グループ名は選択肢を整理するために表示されるだけで、送信されません。

labelでグループ名を付ける

label属性には、グループの意味が短く分かる名前を書きます。たとえば「マークアップ」「プログラミング」のように、同じ種類の候補をまとめる見出しとして使います。

<optgroup label="マークアップ">
  <option value="html">HTML</option>
  <option value="css">CSS</option>
</optgroup>

グループ名だけで選択肢の内容が分かるとは限らないため、select自体にもlabelを関連付けます。グループのラベルは、選択部品全体のラベルの代わりではありません。

グループ全体を一時的に使えなくする

optgroup disabledにすると、そのグループに含まれるoptionをユーザーが選べない状態にできます。提供終了のプランや、現在は利用できない地域などを表示したいときに使えます。

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

使えない理由がユーザーに必要なら、グループ名や説明に状態を含めます。disabledは候補を隠すものではなく、存在を示したまま操作できない状態にする指定です。

optionとの違い

要素	役割	選べるか
select	選択部品全体	部品として操作する
optgroup	関連する選択肢のグループと名前	選べない
option	個別の選択肢と値	選べる

optgroupの中に別のoptgroupを入れて階層を深くする要素ではありません。通常は、1つのoptgroupの中に関連するoptionを並べます。

よくある間違い

• optgroupをselectの外に置く。通常のoptgroupはselectの中で使います。
• グループ名を選択肢だと考える。選択できるのはoptionです。
• optgroupのラベルだけでselectの目的を説明する。選択部品全体には別のlabelを用意します。
• 使えない候補をCSSだけで薄く表示する。操作できない状態は、必要に応じてdisabledで意味付けします。
• キーボードや支援技術の確認なしに、ネイティブのselectを独自部品へ置き換える。まず標準の部品を検討します。

もう少し詳しく

通常のselectでは、optgroupのグループ名にlabelを使います。現在のHTML Standardには、カスタマイズ可能なselectでlegendを使ってグループ名を表す仕組みもあります。通常のselectの書き方と、カスタマイズ可能なselectの描画・アクセシビリティを同じものとして扱わないことが大切です。

Atlasで確認する

labelの解決順序、disabledの適用範囲、form submissionとの境界、DOM API、カスタマイズ可能なselect、アクセシビリティマッピングまで確認したい場合は、Yugien Atlasのoptgroup要素を参照してください。選択モデル全体はAtlasのselect要素、個別の候補はAtlasのoption要素でも確認できます。