[Komponen peramban (browser) bawaan <select>] 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 peramban (browser) bawaan <select>.

<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 untuk multiple={true}). Mengontrol opsi mana yang dipilih. Setiap string nilai harus sama dengan nilai value 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:

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 bernilai true, 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 nilai value.
  • disabled: Sebuah boolean. Jika bernilai true, kotak pilih (select box) tidak akan interaktif dan akan tampak redup.
  • form: Sebuah string. Menentukan id dari <form> yang dimiliki oleh kotak pilih (select box). Jika tidak diisi, maka Specifies the id of the <form> this select box belongs to. Jika dihilangkan, maka menjadi formulir induk (parent form) terdekat.
  • multiple: Sebuah boolean. Jika bernilai true, peramban (browser) mengizinkan pilihan ganda.
  • name: Sebuah string. Menentukan nama untuk kotak pilih (select box) yang [dikirim dengan formulir (form).]
  • onChange: Sebuah fungsi Event handler . Diperlukan untuk kotak pilih (select box) terkontrol. Terpicu segera ketika pengguna memilih opsi berbeda. Berperilaku seperti event input peramban.
  • onChangeCapture: Sebuah versi dari onChange yang terpicu saat fase penangkapan (capture phase).
  • onInput: Sebuah fungsi Event handler. Terpicu segera saat nilai diubah oleh pengguna. Untuk alasan sejarah, di React lebih umum menggunakan onChange yang bekerja dengan cara yang sama.
  • onInputCapture: Sebuah versi dari onInput yang terpicu pada fase penangkapan (capture phase).
  • onInvalid: Sebuah fungsi Event handler. Terpicu jika masukan gagal divalidasi pada pengiriman formulir (form submit). Berbeda dengan event bawaan invalid, event React onInvalid menyebar.
  • onInvalidCapture: Sebuah versi dari onInvalid yang terpicu pada fires in the fase penangkapan (capture phase).
  • required: Sebuah boolean. Jika nilai true, nilai harus disediakan untuk formulir (form) dikirim.
  • size: Sebuah angka. Untuk pemilihan (select) dengan multiple={true}, tentukan jumlah awal item terlihat yang diinginkan.

Catatan Penting

  • Berbeda dengan HTML, memberikan atribut selected pada option 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) meneripa 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 nilai 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>.](https://developer. mozilla.org/en-US/docs/Web/API/HTMLLabelElement/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>
  );
}

Pitfall

Tidak seperti di HTML, meneruskan atribut selected ke <option> individual tidak didukung.

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>
  );
}

Reading the select box value when submitting a form

Add a <form> around your select box with a <button type="submit"> inside. It will call your <form onSubmit> event handler. By default, the browser will send the form data to the current URL and refresh the page. You can override that behavior by calling e.preventDefault(). Read the form data with new FormData(e.target).

export default function EditPost() {
  function handleSubmit(e) {
    // Prevent the browser from reloading the page
    e.preventDefault();
    // Read the form data
    const form = e.target;
    const formData = new FormData(form);
    // You can pass formData as a fetch body directly:
    fetch('/some-api', { method: form.method, body: formData });
    // You can generate a URL out of it, as the browser does by default:
    console.log(new URLSearchParams(formData).toString());
    // You can work with it as a plain object.
    const formJson = Object.fromEntries(formData.entries());
    console.log(formJson); // (!) This doesn't include multiple select values
    // Or you can get an array of name-value pairs.
    console.log([...formData.entries()]);
  }

  return (
    <form method="post" onSubmit={handleSubmit}>
      <label>
        Pick your favorite fruit:
        <select name="selectedFruit" defaultValue="orange">
          <option value="apple">Apel</option>
          <option value="banana">Pisang</option>
          <option value="orange">Jeruk</option>
        </select>
      </label>
      <label>
        Pick all your favorite vegetables:
        <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">Submit</button>
    </form>
  );
}

Note

Give a name to your <select>, for example <select name="selectedFruit" />. The name you specified will be used as a key in the form data, for example { selectedFruit: "orange" }.

If you use <select multiple={true}>, the FormData you’ll read from the form will include each selected value as a separate name-value pair. Look closely at the console logs in the example above.

Pitfall

By default, any <button> inside a <form> will submit it. This can be surprising! If you have your own custom Button React component, consider returning <button type="button"> instead of <button>. Then, to be explicit, use <button type="submit"> for buttons that are supposed to submit the form.

Controlling a select box with a state variable

A select box like <select /> is uncontrolled. Even if you pass an initially selected value like <select defaultValue="orange" />, your JSX only specifies the initial value, not the value right now.

To render a controlled select box, pass the value prop to it. React will force the select box to always have the value you passed. Typically, you will control a select box by declaring a state variable:

function FruitPicker() {
  const [selectedFruit, setSelectedFruit] = useState('orange'); // Declare a state variable...
  // ...
  return (
    <select
      value={selectedFruit} // ...force the select's value to match the state variable...
      onChange={e => setSelectedFruit(e.target.value)} // ... and update the state variable on any change!
    >
      <option value="apple">Apel</option>
      <option value="banana">Pisang</option>
      <option value="orange">Jeruk</option>
    </select>
  );
}

This is useful if you want to re-render some part of the UI in response to every selection.

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>
        Pick all your favorite vegetables:
        <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>Your favorite fruit: {selectedFruit}</p>
      <p>Your favorite vegetables: {selectedVegs.join(', ')}</p>
    </>
  );
}

Pitfall

If you pass value without onChange, it will be impossible to select an option. When you control a select box by passing some value to it, you force it to always have the value you passed. So if you pass a state variable as a value but forget to update that state variable synchronously during the onChange event handler, React will revert the select box after every keystroke back to the value that you specified.

Unlike in HTML, passing a selected attribute to an individual <option> is not supported.

Previous<progress>Next<textarea>

How do you like these docs?