<option>

Selaimen sisäänrakennettu <option>-komponentti mahdollistaa vaihtoehdon renderöimisen <select>-listaan.

<select>
  <option value="someOption">Jokin vaihtoehto</option>
  <option value="otherOption">Toinen vaihtoehto</option>
</select>

Viite
- <option>
Käyttö
- Valintalistan näyttäminen vaihtoehdoilla

Viite

`<option>`

Selaimen sisäänrakennettu <option>-komponentti mahdollistaa vaihtoehdon renderöimisen <select>-listaan.

<select>
  <option value="someOption">Jokin vaihtoehto</option>
  <option value="otherOption">Toinen vaihtoehto</option>
</select>

Näe lisää esimerkkejä alla.

Propsit

<option> tukee kaikkia yleisten elementtien propseja.

Lisäksi, <option> tukee näitä propseja:

disabled: Totuusarvo. Jos true, valinta ei ole valittavissa ja näkyy himmennettynä.
label: Merkkijono. Määrittelee valinnan tarkoituksen. Jos ei määritelty, käytetään tekstiä valinnan sisällä.
value: Arvo, jota käytetään kun ylätason <select> lähetetään lomakkeessa jos tämä vaihtoehto on valittuna.

Rajoitukset

React ei tue <option>-komponentin selected-attribuuttia. Sen sijaan, anna tämän vaihtoehdon value-arvo ylätason <select defaultValue>-komponentille, jos haluat luoda kontrolloimattoman valintalistan, tai <select value>-komponentille, jos haluat luoda kontrolloidun valintalista.

Käyttö

Valintalistan näyttäminen vaihtoehdoilla

Renderöi <select>-komponentti, jossa on sisällä lista <option>-komponentteja näyttääksesi valintalistan. Anna jokaiselle <option>-komponentille value-arvo, joka edustaa dataa, joka lähetetään lomakkeen mukana.

Lue lisää valintalistan näyttämisestä <select>-komponentilla, jossa on lista <option>-komponentteja.

Forkkaa

export default function FruitPicker() {
  return (
    <label>
      Valitse hedelmä:
      <select name="selectedFruit">
        <option value="apple">Omena</option>
        <option value="banana">Banaani</option>
        <option value="orange">Appelsiini</option>
      </select>
    </label>
  );
}

Previous<input>Next<progress>