<option>
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. Sitrue
, 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 lavalue
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> ); }
Error
Extra 185 of 186 byte(s) found at buffer[1]