option.md

title	<option>

Встроенный в браузер компонент <option> отвечает за рендер некоторого пункта списка в поле <select>.

<select>
  <option value="someOption">Пункт списка</option>
  <option value="otherOption">Другой пункт списка</option>
</select>

---

Справочник {/reference/}

<option> {/option/}

Встроенный в браузер компонент <option> отвечает за рендер некоторого пункта списка в поле <select>.

<select>
  <option value="someOption">Пункт списка</option>
  <option value="otherOption">Другой пункт списка</option>
</select>

См. больше примеров ниже.

Пропсы {/props/}

<option> поддерживает все пропсы общих HTML-элементов.

Кроме того, <option> поддерживает следующие пропсы:

• disabled: булево значение. Если true, то пункт списка не будет доступен для выбора и будет отображаться затемнённым.
• label: строка. Указывает смысловое значение пункта списка. Если значение не указано, то будет использоваться текст самого элемента <option>.
• value: Значение, которое будет использоваться в родительском теге <select> при отправке формы, если данный пункт списка будет выбран.

Предостережения {/caveats/}

• React не поддерживает атрибут selected тега <option>. Вместо этого, передайте value пункта списка родительскому <select defaultValue> для неуправляемого поля выбора или <select value> для управляемого.

---

Применение {/usage/}

Отображение поля выбора с пунктами списка {/displaying-a-select-box-with-options/}

Для отображения поля выбора используйте список компонентов <option> внутри тега <select>. Задайте value каждому элементу <option>, чтобы предоставить данные для отправки вместе с формой.

Подробнее про отображение тега <select> со списком компонентов <option>.

export default function FruitPicker() {
  return (
    <label>
      Выберите фрукт:
      <select name="selectedFruit">
        <option value="apple">Яблоко</option>
        <option value="banana">Банан</option>
        <option value="orange">Апельсин</option>
      </select>
    </label>
  );
}

select { margin: 5px; }