<option>

Вбудований компонент браузера <option> компонента дозволяє відображати опцію всередині <select> вікна.

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

Довдіник

<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> для керованого вибору.

Використання

Відображення поля вибору з опціями

Зобразіть <select> зі списком <option> компонентів всередині для відображення вікна вибору. Надати кожному <option> значення , що представляє дані, які буде надіслано з формою.

Детальніше про відображення <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>
  );
}
select { margin: 5px; }