Membuat Komponen Input Yang Fleksibel Untuk Desain Apapun

Selasa, 10 September 2024 2 menit baca

Front-end

Spellcheck dan Autocomplete#

Hampir semua browser modern menggunakan dua fitur HTML ini, pertama spellcheck berguna untuk mengecek typo yang user tulis ke inputan, dengan cara membandingkan value dengan kamus yang browser miliki. Sayangnya, fitur ini jarang disetel oleh user awam, menjadikan error spellcheck tampil terus menerus di inputan jika user menggunakan bahasa berbeda dengan setelan browser. Kedua autocomplete, berguna untuk mempermudah inputan dengan cara menyimpan data setelah pertama kali dikenali oleh browser. Biasanya data yang umum digunakan pada website, seperti nama, alamat, nomor telepon, dll. Dalam beberapa kasus autocomplete banyak kekurangannya, seperti popup yang menampilkan data sensitif dan bukan yang ingin ditulis terekam saat menggunakan tertangkap layar, lalu beberapa kasus hack dilaporkan memanfaatkan fitur ini dan dugaan data yang dimanfaatkan oleh browser.

<input type={type} spellCheck=”false” autoComplete=”off” />

Bungkus Dengan label dan div#

Membungkus input dengan div lalu bungkus lagi dengan label membuat inputan menjadi fleksibel. Alasan kenapa menggunakan elemen label adalah justru struktur inputan di dalam label dianggap semantik, agar elemen dikenali oleh browser. Dan menggunakan div setelah memiliki label menjadikan bungkus kedua menjadikan komponen ini benar-benar sangat fleksibel dalam skenario desain apapun.

<label>
<div>
<input type={type} />
</div>
</label>

Contoh penggunaan dengan label dan button bersamaan#

<label class=”flex flex-col”>
{label && <p>{label}</p>}
<div class=”flex”>
<input type={type} />
{ postIcon && <button type=”button”>
<span class=”material-icons”>visibility_off</span>
</button> }
</div>
</label>

Contoh penggunaan checkbox dengan pesan error bersamaan#

<label class=”flex flex-col”>
<div class=”flex”>
<input type=”checkbox” checked={checked} onChange={onChange} />
<p>{label}</p>
</div>
{isError && <p>Silakan pilih</p>}
</label>