HTML Living Standard/optgroup

OPTGROUP要素

<optgroup>要素は、<select>要素内で選択肢をグループ化するために使用されます。選択肢を論理的なカテゴリに分けることで、ユーザーが選択肢を見つけやすくする役割を果たします。

定義

<optgroup>要素は、<select>要素の子要素として使用されます。
その中に<option>要素を含み、選択肢をグループ化します。
グループにはラベルを付けることができ、ユーザーインターフェース上で視覚的に区別されます。

使用方法

以下は、<optgroup>要素の基本的な使用例です。

基本例

<select name="food">
  <optgroup label="フルーツ">
    <option value="apple">りんご</option>
    <option value="banana">バナナ</option>
  </optgroup>
  <optgroup label="野菜">
    <option value="carrot">にんじん</option>
    <option value="potato">じゃがいも</option>
  </optgroup>
</select>

この例では、選択肢が「フルーツ」と「野菜」の2つのグループに分けられています。

属性

label

グループのラベルを指定します。
この属性は必須です。
ユーザーに見える形式でグループ名を表示します。

<optgroup label="飲み物">
  <option value="tea">お茶</option>
  <option value="coffee">コーヒー</option>
</optgroup>

disabled

グループ全体を無効化します。
無効化されたグループ内の選択肢は選べなくなります。

<optgroup label="アルコール" disabled>
  <option value="beer">ビール</option>
  <option value="wine">ワイン</option>
</optgroup>

使用例

動的グループ化

JavaScriptを使用して動的に<optgroup>要素を生成する例です。

<select id="dynamic-select">
</select>
<script>
  const select = document.getElementById('dynamic-select');
  const group1 = document.createElement('optgroup');
  group1.label = 'フルーツ';
  group1.innerHTML = `
    <option value="apple">りんご</option>
    <option value="banana">バナナ</option>
  `;
  select.appendChild(group1);

  const group2 = document.createElement('optgroup');
  group2.label = '野菜';
  group2.innerHTML = `
    <option value="carrot">にんじん</option>
    <option value="potato">じゃがいも</option>
  `;
  select.appendChild(group2);
</script>

複数レベルのグループ化

ネストされた<optgroup>はサポートされていませんが、ラベルの工夫で疑似的な多層構造を実現できます。

<select name="items">
  <optgroup label="食品 - フルーツ">
    <option value="apple">りんご</option>
    <option value="banana">バナナ</option>
  </optgroup>
  <optgroup label="食品 - 野菜">
    <option value="carrot">にんじん</option>
    <option value="potato">じゃがいも</option>
  </optgroup>
</select>

注意事項

<optgroup>要素は、グループ内に少なくとも1つの<option>要素を含める必要があります。
グループのラベルはブラウザにより表示が異なりますが、アクセシビリティを向上させるために必ずlabel属性を設定してください。
<optgroup>内に無効化された<option>を含める場合でも、<optgroup>自体を無効化することでグループ全体が選択できなくなります。

スタイリング

<optgroup>要素は、CSSでスタイルを変更することができますが、ブラウザによってサポート状況が異なる場合があります。

optgroup {
  font-weight: bold;
  color: #333;
}

利用シーン

選択肢を論理的なカテゴリに分けたい場合。
フォームの視認性とアクセシビリティを向上させたい場合。
ユーザーが選択肢を素早く見つけられるようにしたい場合。