<optgroup>: OPTGROUP 要素

最終更新：2026-10-13

<optgroup>OPTGROUP 要素

select 内の option をグループ化し、選択できないグループラベルとして表示します。

<select>
  <optgroup label="果物">
    <option>りんご</option>
  </optgroup>
</select>

この要素はグローバル属性に加え、以下の属性をサポートします：

属性	値	説明
`label`		The group's label text (required).
`disabled`		Disables all options in the group.

下のコードを編集して、playground でリアルタイム結果を確認：

ブラウザ	Chrome	Edge	Firefox	Safari	Opera
<optgroup>	✓ v1	✓ v12	✓ v1	✓ v1	✓ v1
すべての主要ブラウザでサポート

ヒント： optgroup は入れ子にできません。その option は optgroup 内に置く必要があります。

Qoptgroup は何に使うものですか？

A<select> の中で <option> をグループ化します。label 属性の値がグループ見出しとして表示されます（「関東」「関西」など）。グループ見出しは選択できず、分類ナビゲーションの役割だけを持ちます。長いリストの可読性が大きく上がります。

Qoptgroup は入れ子にできますか？

Aできません。仕様は1階層のグループ化だけを許します。optgroup の中に置けるのは option だけで、入れ子の optgroup は無効な HTML です。2階層以上の分類が必要なら、接頭辞付きの選択肢の文案かカスタムコンポーネントを検討しましょう。

Qoptgroup の label は送信されますか？

A送信されません。送られるのは選択された option の value だけで、グループ見出しは表示専用です。検証にも関与しません。optgroup 全体を無効化（disabled 属性）すると、グループ内のすべての選択肢も無効になります。

今後さらにケーススタディを追加予定です。

Web-Tutorial 技術チーム

複数の開発者によって共同維持されているプログラミングチュートリアルプラットフォーム。各チュートリアルは専門分野の開発者が執筆・レビューしています。正確で信頼性の高いコンテンツを目指しています — 問題を見つけた場合はお知らせください。