<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>. Вместо этого передайте значение value этого варианта родительскому <select defaultValue> для выпадающего списка без управления или <select value> для управляемого выпадающего списка.

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

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

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

Узнайте больше об отображении <select> со списком компонентов <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>
  );
}