Pudotusvalikko

Select — valintalista

<Select value={maa} onChange={(e) => setMaa(e.target.value)}>
  <option value="FI">Suomi</option>
  <option value="SE">Ruotsi</option>
</Select>

Dataohjatulle listalle options poistaa .map-toiston:

<Select
  value={palvelu}
  onChange={(e) => setPalvelu(e.target.value)}
  placeholder="Valitse palvelu…"
  options={palvelut.map((p) => ({ value: p.id, label: `${p.name} · ${p.id}` }))}
/>

placeholder renderöityy disabloituna rivinä tyhjällä arvolla: se näkyy suljetussa listassa muttei ole valittavissa takaisin. Käytä sitä kun kenttä on pakollinen eikä oletusarvoa saa olla.

> Tämä on natiivi `<select>`, ei Radix Select — vaikka > @radix-ui/react-select on peer-riippuvuutena. Ekosysteemin 20 > valintalistaa ovat lyhyitä <option>-listoja dialogeissa; niissä ei ole > hakua, ryhmiä eikä omaa alkiorenderöintiä. Natiivi toimii ilman > "use client":iä, joten se kelpaa myös palvelinkomponenttiin, ja siirtymä > käsin tehdystä on <select> → <Select> ja luokkarivi pois. > > Rikkaampi Radix-pohjainen valitsin voi tulla myöhemmin omalla nimellään — > nimet SelectTrigger / SelectContent / SelectItem on jätetty > varaamatta.

multiple- ja size-attribuuteille käytä natiivia <select>:iä suoraan: kiinteä korkeus ja nuoli-ikoni olettavat yhden rivin valitsimen.