Sign in Subscribe
ReactJs

Menetapkan Default Value pada Input untuk UX yang Lebih Baik

Menetapkan Default Value pada Input untuk UX yang Lebih Baik
Photo by Igor Miske / Unsplash

Kenapa Default Value Itu Penting?

Pernah nggak sih, kamu mengisi form di suatu website dan merasa nyaman karena ada nilai bawaan di kolom input? Entah itu nama pengguna, alamat email, atau opsi yang sudah dipilih sebelumnya, semuanya bikin pengalaman lebih mulus dan nggak perlu mengisi ulang dari nol.

Dalam pengembangan aplikasi React, menetapkan default value pada input bukan hanya soal kenyamanan pengguna, tapi juga mengurangi kesalahan pengisian, mempercepat proses input, dan memberikan pengalaman interaksi yang lebih baik.

Di artikel ini, kita akan bahas cara terbaik menetapkan default value pada input di React biar aplikasi kita lebih user-friendly! 🚀

1. Menetapkan Default Value dengan useState()

Kalau input yang digunakan bersifat dinamis atau bisa diubah oleh pengguna, kita bisa menetapkan nilai awal menggunakan useState().

📌 Contoh Default Value dengan useState()

import React, { useState } from 'react';

function UserForm() {
  const [name, setName] = useState('John Doe');

  function handleChange(event) {
    setName(event.target.value);
  }

  return (
    <div>
      <input type="text" value={name} onChange={handleChange} />
      <p>Nama: {name}</p>
    </div>
  );
}

export default UserForm;

✅ Kelebihan:

  • Memberikan nilai awal pada input tanpa perlu diisi manual.
  • Nilai input tetap bisa diedit oleh pengguna.
  • Bekerja dengan baik untuk form yang menyimpan state secara lokal.

📌 Kapan digunakan?

  • Jika input memerlukan nilai default yang bisa diubah pengguna.
  • Untuk input seperti nama pengguna atau email yang sering digunakan berulang.

2. Menetapkan Default Value dengan Properti defaultValue

Kalau kita butuh input dengan nilai awal yang tidak perlu disimpan dalam state, kita bisa langsung menggunakan properti defaultValue.

📌 Contoh Default Value dengan defaultValue

function DefaultInput() {
  return (
    <div>
      <input type="text" defaultValue="John Doe" />
    </div>
  );
}

export default DefaultInput;

✅ Kelebihan:

  • Lebih ringan karena tidak menyimpan state tambahan.
  • Cocok untuk input yang nilainya hanya sementara (misalnya placeholder yang bisa diedit).

❌ Kekurangan:

  • Tidak bisa digunakan untuk kontrol penuh terhadap nilai input (karena tidak menggunakan state).
  • Jika pengguna mengubah nilai input, tidak ada cara untuk mengembalikannya ke default secara otomatis.

📌 Kapan digunakan?

  • Jika kita hanya ingin memberikan nilai awal sementara tanpa perlu mengontrol perubahan inputnya.
  • Untuk form yang tidak perlu diperbarui state-nya secara real-time.

3. Menetapkan Default Value pada Select dan Radio Button

Selain input teks, kita juga bisa menetapkan default value untuk elemen select (dropdown) dan radio button.

📌 Contoh Default Value pada select

function SelectInput() {
  return (
    <select defaultValue="banana">
      <option value="apple">Apel</option>
      <option value="banana">Pisang</option>
      <option value="orange">Jeruk</option>
    </select>
  );
}

export default SelectInput;

✅ Sekarang opsi "Pisang" akan otomatis terpilih!

📌 Contoh Default Value pada Radio Button

function RadioInput() {
  const [gender, setGender] = useState('male');

  return (
    <div>
      <label>
        <input type="radio" name="gender" value="male" checked={gender === 'male'} onChange={() => setGender('male')} />
        Laki-laki
      </label>
      <label>
        <input type="radio" name="gender" value="female" checked={gender === 'female'} onChange={() => setGender('female')} />
        Perempuan
      </label>
    </div>
  );
}

export default RadioInput;

✅ Sekarang "Laki-laki" akan terpilih secara default, dan pengguna bisa mengubahnya.

📌 Kapan digunakan?

  • Jika ada opsi yang paling sering dipilih, kita bisa menetapkan sebagai default untuk pengalaman lebih cepat.
  • Untuk form seperti jenis kelamin, kategori produk, atau preferensi pengguna.

4. Menetapkan Default Value untuk Checkbox

Untuk checkbox, kita harus menggunakan checked sebagai indikator apakah kotak centang harus dicentang secara default atau tidak.

📌 Contoh Default Value pada Checkbox

import React, { useState } from 'react';

function CheckboxInput() {
  const [isChecked, setIsChecked] = useState(true);

  function handleChange() {
    setIsChecked(!isChecked);
  }

  return (
    <div>
      <label>
        <input type="checkbox" checked={isChecked} onChange={handleChange} />
        Saya setuju dengan syarat dan ketentuan.
      </label>
    </div>
  );
}

export default CheckboxInput;

📌 Kenapa penting?

  • Jika kita ingin menampilkan opsi yang otomatis aktif (misalnya "Ingat saya" pada login).
  • Memberikan pengalaman lebih cepat tanpa perlu mencentang ulang.

5. Kesimpulan

✅ Gunakan useState() untuk nilai default yang bisa diubah pengguna.
✅ Gunakan defaultValue jika tidak perlu menyimpan perubahan input.
✅ Untuk select dan radio button, pastikan ada default value agar tidak kosong.
✅ Checkbox bisa menggunakan checked agar default-nya selalu sesuai keinginan.

Menetapkan default value pada input bukan cuma soal mengisi nilai awal, tapi juga soal membantu pengguna mengisi form lebih cepat, meminimalkan kesalahan input, dan meningkatkan pengalaman penggunaan aplikasi. Yuk, mulai terapkan best practice ini di proyek React kamu!

Read next