<optgroup> – елемент групи варіантів

Елемент HTML <optgroup> створює групування варіантів усередині елемента <select>.

Спробуйте його в дії

[!NOTE] Елементи optgroup не можна вкладати один в одного.

Атрибути

disabled: Якщо задано цей Булів атрибут, то жоден з елементів цієї групи варіантів не може бути вибраним. Зазвичай браузери позначають такі контрольні елементи сірим кольором і не передають їм жодних браузерних подій, таких як клацання мишею або події, пов'язані з фокусом.
label: Назва групи варіантів, яку браузер може використовувати при позначенні варіантів у користувацькому інтерфейсі. Цей атрибут є обов'язковим, якщо цей елемент використовується.

Приклади

<select>
  <optgroup label="Група 1">
    <option>Варіант 1.1</option>
  </optgroup>
  <optgroup label="Група 2">
    <option>Варіант 2.1</option>
    <option>Варіант 2.2</option>
  </optgroup>
  <optgroup label="Група 3" disabled>
    <option>Варіант 3.1</option>
    <option>Варіант 3.2</option>
    <option>Варіант 3.3</option>
  </optgroup>
</select>

Результат

Технічний підсумок

Категорії вмісту	Жодних.
Дозволений вміст	Нуль або більше елементів `<option>`.
Пропуск тега	Початковий тег є обов'язковим. Кінцевий тег є необов'язковим, якщо після цього елемента зразу стоїть інший елемент `<optgroup>`, або якщо батьківський елемент не має далі вмісту.
Дозволені батьківські елементи	Елемент `<select>`.
Неявна роль ARIA	`group`
Дозволені ролі ARIA	Жодної дозволеної ролі
Інтерфейс DOM	`HTMLOptGroupElement`

Специфікації

Специфікація
HTML Standard (HTML) # the-optgroup-element

Сумісність із браузерами

	desktop						mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	WebView Android	Chrome Android	Firefox for Android	Opera Android	Safari on iOS	Samsung Internet
`optgroup`	Chrome Full support 1	Edge Full support 12	Firefox Full support 1	Internet Explorer Full support 5.5	Opera Full support Так	Safari Full support Так	WebView Android Full support Так	Chrome Android Full support Так	Firefox for Android Full support 4	Opera Android Full support Так	Safari on iOS Full support Так	Samsung Internet Full support Так
`disabled`	Chrome Full support 1	Edge Full support 12	Firefox Full support 1	Internet Explorer Full support 8	Opera Full support Так	Safari Full support Так	WebView Android Full support Так	Chrome Android Full support Так	Firefox for Android Full support 4	Opera Android Full support Так	Safari on iOS Full support Так	Samsung Internet Full support Так
`label`	Chrome Full support 1	Edge Full support 12	Firefox Full support 1	Internet Explorer Full support 5.5	Opera Full support Так	Safari Full support Так	WebView Android Full support Так	Chrome Android Full support Так	Firefox for Android Full support 4	Opera Android Full support Так	Safari on iOS Full support Так	Samsung Internet Full support Так