<select>
Komponen <select>
bawaan peramban (browser) memungkinkan anda untuk me-render sebuah kotak pilih (select box) dengan opsi.
<select>
<option value="someOption">Sebuah opsi</option>
<option value="otherOption">Opsi lainnya</option>
</select>
Referensi
<select>
Untuk menampilkan kotak pilih (select box), render komponen <select>
bawaan peramban (browser).
<select>
<option value="someOption">Sebuah opsi</option>
<option value="otherOption">Opsi lainnya</option>
</select>
Lihat contoh lainnya di bawah ini.
Props
<select>
mendukung seluruh props elemen umum.
Anda dapat membuat sebuah kotak pilih (select box) terkontrol dengan memberikan prop <value>
:
value
: Sebuah string (atau senarai (array) string untukmultiple={true}
). Mengontrol opsi mana yang dipilih. Setiap string nilai harus sama dengan nilaivalue
dari beberapa<option>
yang tertanam di dalam<select>
.
Ketika Anda memberikan value
, Anda juga harus memberikan handler onChange
yang memperbarui nilai yang diberi.
Jika <select>
Anda tidak terkontrol, Anda dapat memberikan prop defaultValue
:
defaultValue
: Sebuah string (atau senarai (array) string untukmultiple={true}
). Menentukan pilihan yang dipilih di awal.
Props <select>
ini relevan baik untuk kotak pilih (select box) yang terkontrol maupun tidak terkontrol:
autoComplete
: Sebuah string. Menentukan salah satu dari kemungkinan perilaku autocomplete.autoFocus
: Sebuah boolean. Jika bernilaitrue
, React akan fokus pada elemen yang terpasang (mount).children
:<select>
menerima komponen<option>
,<optgroup>
, dan<datalist>
sebagai anak (children). Anda juga dapat memberikan komponen Anda sendiri selama akhirnya salah satu dari komponen yang diizinkan akan di-render. Jika Anda memberikan komponen Anda yang pada akhirnya me-render tag<option>
, setiap<option>
yang Anda render harus mempunyai nilaivalue
.disabled
: Sebuah boolean. Jika bernilaitrue
, kotak pilih (select box) tidak akan interaktif dan akan tampak redup.form
: Sebuah string. Menentukanid
dari<form>
yang dimiliki oleh kotak pilih (select box). Jika tidak diisi, maka menjadi formulir induk (parent form) terdekat.multiple
: Sebuah boolean. Jika bernilaitrue
, peramban (browser) mengizinkan pilihan ganda.name
: Sebuah string. Menentukan nama untuk kotak pilih (select box) yang dikirim dengan formulir (form).onChange
: Sebuah fungsiEvent
handler . Diperlukan untuk kotak pilih (select box) terkontrol. Terpicu segera ketika pengguna memilih opsi berbeda. Berperilaku seperti eventinput
pada peramban.onChangeCapture
: Sebuah versi darionChange
yang terpicu saat fase penangkapan (capture phase).onInput
: Sebuah fungsiEvent
handler. Terpicu segera saat nilai diubah oleh pengguna. Untuk alasan sejarah, di React lebih umum menggunakanonChange
yang bekerja dengan cara yang sama.onInputCapture
: Sebuah versi darionInput
yang terpicu pada fase penangkapan (capture phase).onInvalid
: Sebuah fungsiEvent
handler. Terpicu jika masukan gagal divalidasi pada pengiriman formulir (form submit). Berbeda dengan event bawaaninvalid
, event ReactonInvalid
menyebar.onInvalidCapture
: Sebuah versi darionInvalid
yang terpicu pada fase penangkapan (capture phase).required
: Sebuah boolean. Jika nilaitrue
, nilai harus diisi untuk formulir (form) dapat dikirim.size
: Sebuah angka. Untuk pemilihan (select) denganmultiple={true}
, tentukan jumlah awal item terlihat yang diinginkan.
Catatan Penting
- Berbeda dengan HTML, memberikan atribut
selected
padaoption
tidak didukung. Sebagai gantinya, gunakan<select defaultValue>
untuk kotak pilih (selected box) yang tidak terkontrol dan<select value>
untuk kotak pilih (selected box) yang terkontrol. - Jika kotak pilih (select box) menerima prop value, maka prop tersebut akan diperlakukan sebagai terkontrol.
- Sebuah kotak pilih (select box) tidak dapat menjadi terkontrol dan tidak terkontrol pada waktu yang sama.
- Sebuah kotak pilih (select box) tidak dapat berganti menjadi terkontrol atau tidak terkontrol selama masa hidupnya.
- Setiap kotak pilih (select box) terkontrol membutuhkan event handler
onChange
yang secara sinkron memperbarui nilai yang ada di belakangnya.
Penggunaan
Menampilkan kotak pilih (select box) dengan opsi
Render <select>
dengan daftar komponen <option>
di dalamnya untuk menampilkan sebuah kotak pilih (select box). Beri setiap <opsi>
sebuah value
yang mewakili data yang akan dikirimkan bersama formulir (form).
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> ); }
Memberikan label untuk kotak pilih (select box)
Biasanya, Anda akan menempatkan setiap <select>
di dalam tag <label>
. Ini memberi tahu peramban (browser) bahwa label ini dikaitkan dengan kotak pilih (select box) tersebut. Saat pengguna mengeklik labelnya, peramban (browser) secara otomatis akan memfokuskan kotak pilih (select box). Hal ini juga penting untuk aksesibilitas: pembaca layar (screen reader) akan membacakan keterangan label saat pengguna memfokuskan kotak pilih (select box).
Jika Anda tidak dapat menumpuk <select>
ke dalam <label>
, kaitkan keduanya dengan meneruskan ID yang sama ke <select id>
dan <label htmlFor>
. Untuk menghindari konflik antara beberapa instans (instance) dari satu komponen, buat ID tersebut dengan useId
.
import { useId } from 'react'; export default function Form() { const vegetableSelectId = useId(); return ( <> <label> Pilih buah: <select name="selectedFruit"> <option value="apple">Apel</option> <option value="banana">Pisang</option> <option value="orange">Jeruk</option> </select> </label> <hr /> <label htmlFor={vegetableSelectId}> Pilih sayuran: </label> <select id={vegetableSelectId} name="selectedVegetable"> <option value="cucumber">Timun</option> <option value="corn">Jagung</option> <option value="tomato">Tomat</option> </select> </> ); }
Memberikan opsi awal yang dipilih
Secara bawaan, peramban (browser) akan memilih <opsi>
pertama dalam daftar. Untuk memilih opsi yang berbeda secara default, teruskan nilai value
dari <option>
tersebut sebagai defaultValue
ke elemen <select>
.
export default function FruitPicker() { return ( <label> Pilih buah: <select name="selectedFruit" defaultValue="orange"> <option value="apple">Apel</option> <option value="banana">Pisang</option> <option value="orange">Jeruk</option> </select> </label> ); }
Mengaktifkan banyak pilihan
Berikan multiple={true}
ke <select>
agar pengguna dapat memilih beberapa opsi. Dalam hal ini, jika Anda juga menentukan defaultValue
untuk menentukan opsi awal yang dipilih, maka harus dalam bentuk senarai (array).
export default function FruitPicker() { return ( <label> Pilih beberapa buah: <select name="selectedFruit" defaultValue={['orange', 'banana']} multiple={true} > <option value="apple">Apel</option> <option value="banana">Pisang</option> <option value="orange">Jeruk</option> </select> </label> ); }
Membaca nilai kotak pilih saat mengirimkan formulir
Tambahkan <form>
di sekitar kotak pilih (select box) Anda dengan <button type="submit">
di dalamnya. Ini akan memanggil event handler <form onSubmit>
Anda. Secara bawaan, peramban (browser) akan mengirimkan data formulir (form data) ke URL yang sedang digunakan dan menyegarkan (refresh) halaman. Anda dapat menimpa perilaku tersebut dengan memanggil e.preventDefault()
. Baca data formulir (form data) dengan new FormData(e.target)
.
export default function EditPost() { function handleSubmit(e) { // Mencegah peramban (browser) memuat ulang halaman e.preventDefault(); // Baca data formulir (form data) const form = e.target; const formData = new FormData(form); // Anda dapat meneruskan formData sebagai badan pengambilan (fetch body) secara langsung: fetch('/some-api', { method: form.method, body: formData }); // Anda dapat membuat URL darinya, seperti yang dilakukan peramban (browser) secara bawaan: console.log(new URLSearchParams(formData).toString()); // Anda dapat menggunakannya sebagai objek biasa. const formJson = Object.fromEntries(formData.entries()); console.log(formJson); // (!) Tidak termasuk beberapa nilai pilihan // Atau Anda bisa mendapatkan senarai (array) pasangan nama-nilai. console.log([...formData.entries()]); } return ( <form method="post" onSubmit={handleSubmit}> <label> Pilih buah kesukaan Anda: <select name="selectedFruit" defaultValue="orange"> <option value="apple">Apel</option> <option value="banana">Pisang</option> <option value="orange">Jeruk</option> </select> </label> <label> Pilih semua sayur kesukaan Anda: <select name="selectedVegetables" multiple={true} defaultValue={['corn', 'tomato']} > <option value="cucumber">Timun</option> <option value="corn">Jagung</option> <option value="tomato">Tomat</option> </select> </label> <hr /> <button type="reset">Reset</button> <button type="submit">Kirim</button> </form> ); }
Mengontrol kotak pilih (select box) dengan variabel state
Kotak pilih (select box) seperti <select/>
tidak terkontrol. Bahkan jika Anda nilai pilihan awal seperti <select defaultValue="orange">
, JSX Anda hanya menentukan nilai awal, bukan nilai saat ini.
Untuk me-render kotak pilih (select box) controlled, berikan prop value
padanya. React akan memaksa kotak pilih (select box) untuk selalu mempunyai nilai value
yang Anda berikan. Biasanya, Anda akan mengrontrol kotak pilih (select box) dengan mendeklarasikan variabel state:
function FruitPicker() {
const [selectedFruit, setSelectedFruit] = useState('orange'); // Deklarasikan variabel state...
// ...
return (
<select
value={selectedFruit} // ...memaksa nilai select agar cocok dengan variabel state...
onChange={e => setSelectedFruit(e.target.value)} // ... dan memperbarui variabel state pada setiap perubahan!
>
<option value="apple">Apel</option>
<option value="banana">Pisang</option>
<option value="orange">Jeruk</option>
</select>
);
}
Hal ini berguna jika Anda ingin me-render ulang beberapa bagian UI sebagai respons terhadap setiap pilihan.
import { useState } from 'react'; export default function FruitPicker() { const [selectedFruit, setSelectedFruit] = useState('orange'); const [selectedVegs, setSelectedVegs] = useState(['corn', 'tomato']); return ( <> <label> Pilih buah: <select value={selectedFruit} onChange={e => setSelectedFruit(e.target.value)} > <option value="apple">Apel</option> <option value="banana">Pisang</option> <option value="orange">Jeruk</option> </select> </label> <hr /> <label> Pilih semua sayur kesukaan Anda: <select multiple={true} value={selectedVegs} onChange={e => { const options = [...e.target.selectedOptions]; const values = options.map(option => option.value); setSelectedVegs(values); }} > <option value="cucumber">Timun</option> <option value="corn">Jagung</option> <option value="tomato">Tomat</option> </select> </label> <hr /> <p>Buah kesukaan Anda: {selectedFruit}</p> <p>Sayur kesukaan Anda: {selectedVegs.join(', ')}</p> </> ); }