Digital Transformation
Customizable Select Element
TL;DR: Customizable Select adalah evolusi elemen HTML
<select>yang membolehkan styling penuh via CSS dan konten kustom di dalam opsi. Per April 2026 fitur ini mulai stabil di Chrome dan dalam tahap origin trial untuk browser lain, memberi sinyal bahwa dropdown buatan JavaScript bisa pensiun.
Apa itu Customizable Select?
Selama bertahun-tahun, <select> adalah elemen yang sulit di-styling konsisten antar browser. Tim desain biasanya memilih membangun dropdown sendiri dengan JavaScript. Customizable Select memperkenalkan opt-in via appearance: base-select, lalu developer bebas menata <option> seperti elemen biasa. Hasilnya, dropdown native dengan tampilan brand yang konsisten. Komponen ini sering tampil di formulir bisnis, sehingga pasangannya yang sering muncul adalah Popover API untuk menu yang terlampir ke tombol.
Komponen Pembentuk
| Bagian | Fungsi |
|---|---|
appearance: base-select | Mengaktifkan mode customizable |
selectedcontent | Bagian yang menampilkan opsi terpilih di dalam button |
<option> kustom | Bisa berisi gambar, badge, atau ikon |
interestfor | Attribute pendukung untuk delegasi event (eksperimental) |
Kenapa Penting?
Komponen native lebih ramah aksesibilitas (NVDA, VoiceOver, TalkBack langsung kenal) dan lebih ringan dari komponen JavaScript pihak ketiga. Untuk website bisnis Indonesia yang mengutamakan performa dan skor Core Web Vitals, ini berarti pemangkasan 10 sampai 30 KB JavaScript per halaman yang memuat dropdown panjang seperti pilih provinsi, pilih jasa, atau pilih bank.
Pertanyaan Umum
Apakah Customizable Select sudah aman dipakai sekarang?
Untuk progressive enhancement, ya. Pakai @supports (appearance: base-select) agar browser tanpa dukungan tetap mendapat <select> standar. Praktik standar di industri saat ini menempatkannya sebagai upgrade, bukan ganti total.
Apa beda Customizable Select dengan library dropdown?
Library dropdown punya kontrol penuh tapi menambah JavaScript dan kerap punya bug aksesibilitas. Customizable Select native, ramah keyboard, dan bekerja saat JavaScript gagal load.