Le composant natif <option> vous permet d’afficher une option dans une liste <select>.

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

Référence

<option>

Le composant natif <option> vous permet d’afficher une option dans une liste déroulante <select>.

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

Voir d’autres exemples ci-dessous.

Props

<option> prend en charge toutes les props communes aux éléments.

<option> prend également en charge les props suivantes :

  • disabled : un booléen. Si true, l’option ne sera pas sélectionnable et apparaîtra grisée.
  • label : une chaine de caractères. Indique la signification de l’option. Lorsqu’elle est manquante, le texte de l’option est utilisé.
  • value : la valeur utilisée quand on soumet le <select> parent dans un formulaire et que cette option est sélectionnée dans la liste.

Limitations

  • React ne prend pas en charge l’attribut selected pour <option>. Passez plutôt la value de cette option au <select defaultValue> parent pour une liste déroulante non contrôlée, ou <select value> pour une liste déroulante contrôlée.

Utilisation

Afficher une liste déroulante avec des options

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

Apprenez-en davantage sur l’affichage d’un <select> avec une liste de composants <option>.

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>