Fitur show/hide password berfungsi mengubah tipe atribut input dari password menjadi text secara dinamis menggunakan nilai state bertipe boolean (true/false). Dengan memanfaatkan state di React, kita tidak perlu memanipulasi DOM secara manual menggunakan JavaScript murni. Cukup dengan satu variabel state, tampilan input dan teks tombol akan otomatis menyesuaikan kondisi saat ini.

Kenapa Fitur Show/Hide Password Sangat Penting pada Form Login?

Saat saya membuat form login untuk aplikasi marketplace digital, pengguna sering mengeluhkan masalah sederhana: mereka salah mengetik password yang rumit dan tidak bisa mengecek karakter mana yang keliru. Karena input bawaan HTML menutupi teks dengan karakter titik-titik, pengguna terpaksa menghapus seluruh teks dan mengetik ulang dari awal.

Masalah kecil ini sering menyebabkan frustrasi (user friction) dan meningkatkan kemungkinan pengguna gagal login berulang kali. Memberikan opsi untuk menampilkan password secara sementara terbukti meningkatkan pengalaman pengguna (UX) tanpa mengorbankan keamanan dasar.

Kenapa Menggunakan State React, Bukan Manipulasi DOM Manual?

Di JavaScript murni (Vanilla JS), kita biasanya harus mengambil elemen DOM terlebih dahulu menggunakan document.getElementById('password').type = 'text' untuk mengubah tipe input.

Saya memilih pendekatan State di React (useState) karena React menggunakan konsep declarative rendering. Kita tidak perlu mengambil elemen DOM secara langsung—yang berisiko error jika elemen belum dirender. Cukup ubah nilai state-nya, dan React akan menangani pembaruan elemen input serta perubahan teks tombol secara otomatis, aman, dan bersih.

Langkah-Langkah Penerapan Kode

Tahap 1: Kode Dasar Form Login (Tanpa Fitur Show/Hide)

Pada bentuk awalnya, form login menggunakan input tipe password standar.

“Untuk memperjelas logika intinya tanpa terdistraksi oleh styling antarmuka (UI) yang panjang, berikut adalah potongan kode ringkas komponen React yang mengelola fitur Show/Hide Password:”

import { useState } from 'react';

function LoginForm() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  return (
    <form>
      <label>Email</label>
      <input 
        type="email" 
        value={email} 
        onChange={(e) => setEmail(e.target.value)} 
      />

      <label>Kata Sandi</label>
      {/* Input password masih standar */}
      <input 
        type="password" 
        value={password} 
        onChange={(e) => setPassword(e.target.value)} 
      />

      <button type="submit">Masuk</button>
    </form>
  );
}

Tahap 2: Menambahkan Fitur Show/Hide Password

Untuk menambahkan fiturnya, kita hanya perlu menambahkan 3 langkah utama :

• Inisialisasi State: Buat state showPassword dengan nilai awal false (tersembunyi).
• Atribut Tipe Dinamis: Gunakan ternary operator (showPassword ? 'text' : 'password') pada atribut type.
• Tombol Penukar (Toggle): Buat tombol dengan onClick yang membalikkan nilai state (setShowPassword(!showPassword)).

“Untuk memperjelas logika intinya tanpa terdistraksi oleh styling antarmuka (UI) yang panjang, berikut adalah potongan kode ringkas komponen React yang mengelola fitur Show/Hide Password:”

import { useState } from 'react';

function LoginForm() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  
  // 1. Inisialisasi State untuk status penglihatan password
  const [showPassword, setShowPassword] = useState(false);

  return (
    <form>
      <label>Email</label>
      <input 
        type="email" 
        value={email} 
        onChange={(e) => setEmail(e.target.value)} 
      />

      <label>Kata Sandi</label>
      <div className="input-wrapper" style={{ position: 'relative' }}>
        {/* 2. Tipe input berubah dinamis tergantung nilai showPassword */}
        <input 
          type={showPassword ? 'text' : 'password'} 
          value={password} 
          onChange={(e) => setPassword(e.target.value)} 
        />

        {/* 3. Tombol pemicu untuk membalikkan nilai state */}
        <button 
          type="button" 
          onClick={() => setShowPassword(!showPassword)}
        >
          {showPassword ? 'Sembunyikan' : 'Tampilkan'}
        </button>
      </div>

      <button type="submit">Masuk</button>
    </form>
  );
}

export default LoginForm;

Catatan Gambar: Tampilan antarmuka Form Login DigiMarket yang dibangun menggunakan React dan Tailwind CSS. Komponen lengkapnya menggabungkan logika state showPassword dengan struktur tampilan di atas.

Dengan logika di atas, saat tombol diklik, fungsi setShowPassword(!showPassword) akan mengubah nilai showPassword dari false menjadi true. React secara otomatis melakukan re-render pada komponen, mengubah type="password" menjadi type="text", dan memperbarui label tombol menjadi “Sembunyikan”.

Kesimpulan

Fitur show/hide password adalah solusi sederhana untuk mencegah kesalahan ketik pengguna pada form login. Mengelola fitur ini menggunakan state di React jauh lebih efisien dibandingkan manipulasi DOM manual karena seluruh perubahan tampilan dipicu secara otomatis berdasarkan perubahan data (state).

Ditulis oleh Ceva Aska Salsabil — Lihat portofolio lengkap saya di Edusoft Portfolio Profile