Nota bene

Questa pagina è stata tradotta automaticamente e supervisionata da un maintainer. Un’ulteriore revisione da parte della community sarebbe comunque utile. Migliora questa traduzione.

Il componente browser integrato <option> ti permette di renderizzare un’opzione dentro una casella <select>.

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

Reference

<option>

Il componente browser integrato <option> ti permette di renderizzare un’opzione dentro una casella <select>.

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

Vedi altri esempi sotto.

Props

<option> supporta tutte le props comuni degli elementi.

Inoltre, <option> supporta queste props:

  • disabled: Un booleano. Se true, l’opzione non sarà selezionabile e apparirà attenuata.
  • label: Una stringa. Specifica il significato dell’opzione. Se non specificato, viene usato il testo dentro l’opzione.
  • value: Il valore da usare quando si invia il <select> padre in un form se questa opzione è selezionata.

Caveats

  • React non supporta l’attributo selected su <option>. Passa invece il value di questa opzione al <select defaultValue> padre per un select non controllato, oppure al <select value> padre per un select controllato.

Usage

Visualizzare una casella di selezione con opzioni

Renderizza un <select> con un elenco di componenti <option> al suo interno per visualizzare una casella select. Assegna a ogni <option> un value che rappresenta i dati da inviare con il form.

Leggi di più sulla visualizzazione di un <select> con un elenco di componenti <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>
  );
}
Previous<input>
Next<progress>