<option>

Le composant natif <option> vous permet de rendre une option dans un champ <select>.

<select>
  <option value="someOption">Une option</option>
  <option value="otherOption">Une autre option</option>
</select>

Référence
- <option>
Utilisation
- Afficher un champ select avec des options

Référence

`<option>`

Le composant natif <option> vous permet de rendre une option dans un champ <select>.

<select>
    <option value="someOption">Une option</option>
    <option value="otherOption">Une autre option</option>
</select>

Voir d’autres exemples ci-dessous.

Props

<option> supporte toutes les props des éléments communs.

De plus, <option> supporte ces props :

disabled: Un booléen. Si true, l’option ne sera pas sélectionnable et apparaîtra comme atténuée.
label: Une chaine de caractère. Indique la signification de l’option. Si non indiqué, le texte dans l’option sera utilisé.
value: La valeur utilisée quand on soumet le <select> parent dans un formulaire, si cette option est sélectionnée.

Limitations

React ne supporte pas l’attribut selected pour <option>. À la place, passez la value de cette option au <select defaultValue> parent pour un composant select non contrôlé, ou <select value> pour un composant select contrôlé.

Utilisation

Afficher un champ select avec des options

Écrivez un <select> avec une liste de composants <option> à l’intérieur pour afficher un champ select. Donnez à chaque <option> une value qui représente la donnée qui sera soumise avec le formulaire.

Lire davantage à propos de l’affichage d’un <select> avec une liste de composants <option>.

Fork

export default function FruitPicker() {
  return (
    <label>
      Choisissez un fruit :
      <select name="selectedFruit">
        <option value="apple">Pomme</option>
        <option value="banana">Banane</option>
        <option value="orange">Orange</option>
      </select>
    </label>
  );
}

Précédent<input>Suivant<progress>