<option>

<select>
  <option value="someOption">Some option</option>
  <option value="otherOption">Other option</option>
</select>

• Ссылка
  • <option>
• Использование
  • Отображение списка выбора с вариантами

Ссылка

<option>

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

<select>
  <option value="someOption">Some option</option>
  <option value="otherOption">Other option</option>
</select>

См. дополнительные примеры ниже.

Свойства

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

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

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

Ограничения

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

Использование

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

Отобразите поле <%%CODE_BLOCK_22%%%> с перечнем компонентов <option>, чтобы отобразить список выбора. Присвойте каждому <option> значение value, представляющее данные, которые будут отправлены вместе с формой.

Дополнительная информация об отображении списка выбора с перечнем компонентов <option>.

export default function FruitPicker() {
  return (
    <label>
      Pick a fruit:
      <select name="selectedFruit">
        <option value="apple">Apple</option>
        <option value="banana">Banana</option>
        <option value="orange">Orange</option>
      </select>
    </label>
  );
}