Komponen <option> bawaan peramban memungkinkan Anda untuk me-render opsi di dalam kotak <select>.

<select>
<option value="sebuahOpsi">Sebuah opsi</option>
<option value="opsiLain">Opsi lain</option>
</select>

Referensi

<option>

Komponen <option> bawaan peramban memungkinkan Anda untuk me-render opsi di dalam kotak <select>.

<select>
<option value="sebuahOpsi">Sebuah opsi</option>
<option value="opsiLain">Opsi lain</option>
</select>

Lihat contoh lebih banyak di bawah ini.

Props

<option> mendukung semua props element umum.

Sebagai tambahan, <option> mendukung props ini:

Caveats

  • React tidak mendukung atribut selected dalam <option>. Sebagai gantinya, oper value dari opsi ke elemen induk <select defaultValue> untuk sebuah uncontrolled select box, atau <select value> untuk controlled select.

Penggunaan

Menampilkan kotak select dengan opsi

Render sebuah <select> dengan daftar komponen <option> di dalamnya untuk menampilkan sebuah kotak pilihan. Beri setiap <option> sebuah value yang merepresentasikan data yang akan dikirim dengan formulir.

Baca lebih lanjut mengenai menampilkan <select> dengan daftar dari komponen <option>.

export default function FruitPicker() {
  return (
    <label>
      Pilih buah:
      <select name="selectedFruit">
        <option value="apple">Apel</option>
        <option value="banana">Pisang</option>
        <option value="orange">Jeruk</option>
      </select>
    </label>
  );
}