FormSelect

Dasar

Tombol dan daftar pilihan digambar oleh W4C, termasuk di ponsel. Pilihan terpilih diberi latar primary dan teks tebal; pilihan yang sedang ditunjuk keyboard diberi garis tepi. Ketik huruf untuk melompat ke pilihan yang sesuai, atau gunakan panah dan Enter.

Pencarian

Aktifkan searchable untuk menyaring label pilihan. Grup kosong disembunyikan, pilihan sebelumnya tetap tersimpan, dan hasil kosong diberi pesan. ArrowDown/ArrowUp menavigasi hasil; Enter memilih, Escape menutup.

Multiple dan tag terpilih

Gunakan multiple dengan v-model array. Pilihan yang dipilih menjadi tag di dalam kolom, masing-masing dengan tombol hapus, dan pilihan dapat ditambah atau dilepas tanpa menutup popup. name menghasilkan satu entri FormData per nilai: baca dengan getAll(name). required berarti minimal satu pilihan.

Tampilan pilihan

Tag tumbuh ke bawah saat pilihan bertambah, jadi tinggi kolom ikut berubah. Batasi dengan max-tags agar sisanya menjadi "+N lagi", atau pakai display="count" supaya kolom hanya menampilkan jumlahnya dan tingginya tetap. Pembaca layar tetap menyebutkan seluruh pilihan pada ketiga tampilan.

Tag bebas

taggable mengaktifkan multiple dan pencarian sekaligus. Ketik nilai baru lalu pilih Tambahkan atau tekan Enter saat opsi itu aktif. Tag baru berupa string dan tersimpan dalam v-model; data persisten tetap menjadi tanggung jawab aplikasi.

CTA tambah di bawah daftar

create-label menampilkan tombol yang tetap terlihat saat daftar digulir atau hasil kosong. Event create membawa teks pencarian. Contoh ini membuka form lokal; aplikasi juga bisa membuka modal atau melakukan penyimpanan melalui API.

Kelompok dan nilai non-teks

Bentuk { label, items } menghasilkan kelompok berlabel. Nilai angka tetap tersimpan sebagai angka, bukan teks.

Error, disabled, dan ukuran

Pada select wajib, placeholder dikunci setelah orang memilih, sehingga tidak bisa kembali ke keadaan kosong. Pada select opsional, placeholder tetap bisa dipilih untuk mengosongkan nilai.

Daftar panjang dan posisi popup

Popup mengikuti lebar kontrol, bisa digulir, dan terbuka ke atas jika ruang di bawah tidak cukup. Lapisan popover menjaga daftar tetap terlihat di dalam card dengan overflow tersembunyi. Contoh ini menyediakan 40 lokasi.

Ribuan pilihan tanpa DOM berat

Di atas 80 pilihan, hanya baris yang terlihat yang dibuat di DOM; dua pengisi menggantikan sisanya sehingga scrollbar tetap mengukur seluruh daftar. Contoh ini memuat 1000 lokasi, dan yang hidup di DOM tetap sekitar dua puluh baris. Baris harus seragam tingginya, jadi virtual scroll berhenti sendiri bila daftar memakai kelompok atau deskripsi — untuk daftar seperti itu, saring dengan pencarian.

Memuat per halaman dari server

Bila datanya diambil per halaman, biarkan aplikasi yang mengambil dan komponen yang memberi tahu kapan perlu. Saat gulir mendekati dasar daftar, load-more dipancarkan sekali; permintaan berikutnya baru dibuka setelah aplikasi menjawab, baik dengan data baru maupun dengan loading yang kembali false. Isi has-more selama masih ada halaman, dan matikan filter karena pencarian sudah dikerjakan server.

Pengiriman form dan reset

Atribut name ikut dalam FormData. required mencegah form kosong dikirim dan memfokuskan kontrol; reset mengembalikan nilai awal saat komponen dipasang. Untuk pesan validasi spesifik, isi error pada FormField dari aplikasi.

API