<option>

Komponen <option> bawaan peramban memungkinkan Anda untuk merender opsi di dalam kotak <select>.

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

Referensi
- <option>
Penggunaan
- Menampilkan kotak select dengan opsi

Referensi

`<option>`

Komponen <option> bawaan peramban memungkinkan Anda untuk merender 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:

disabled: Sebuah boolean. Jika true, opsi akan tidak dapat dipilih dan akan tampak redup.
label: Sebuah string. Menentukan arti dari opsi. Jika tidak ditentukan, teks di dalam opsi akan digunakan.
value: Nilai yang akan digunakan ketika mengirimkan induk <select> dalam form jika opsi ini dipilih.

Peringatan

React tidak mendukung atribut selected dalam <option>. Sebagai gantinya, kirimkan 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>.

Fork

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

Previous<input>Next<progress>