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

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

Справочник

<option>

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

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

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

Пропсы

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

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

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

Предостережения

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

Применение

Отображение поля выбора с пунктами списка

Для отображения поля выбора используйте список компонентов <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>
  );
}
Предыдущая глава<input>
Следующая глава<progress>