Searchbar

Search Bar digunakan untuk membantu pengguna menemukan informasi, data, atau konten tertentu di dalam sistem dengan cepat dan efisien.

Komponen ini berfungsi sebagai titik masuk utama untuk pencarian, baik dalam konteks halaman tunggal maupun di seluruh platform.

Penggunaan

Gunakan Search Bar untuk memberikan akses cepat terhadap fungsi pencarian di halaman yang menampilkan banyak data atau konten, seperti Dashboard, Table List, atau Content Management System.

Search Bar membantu pengguna mempersempit hasil pencarian tanpa harus menelusuri satu per satu item secara manual sehingga mereka dapat mencari informasi atau konten tertentu dengan lebih cepat dan efisien.

Anatomi

Kategori

Plain

Search Bar sederhana tanpa ikon tambahan.

With Button

Menampilkan text input serta tombol tambahan di dalam atau di sebelah kanan kolom input untuk memperkuat affordance fungsi pencarian.

Search Result

Menampilkan daftar hasil pencarian yang relevan berdasarkan input pengguna.

Search History

Menampilkan riwayat pencarian sebelumnya yang disimpan untuk mempermudah akses ulang.

Result Chip

Menampilkan hasil pencarian yang telah dipilih dalam bentuk chip untuk memperjelas konteks.

Perilaku

Penjelasan perubahan tampilan dan interaksi searchbar berdasarkan tindakan pengguna.

Focus State

Saat pengguna mengklik area input, searchbar akan berpindah ke mode fokus.

Penunjuk teks (cursor) akan muncul di dalam kolom, menandakan bahwa pengguna siap mengetik.

Pada keadaan ini, sistem dapat menampilkan riwayat pencarian (search history) di bawah kolom input untuk membantu pengguna memilih pencarian sebelumnya dengan cepat.

Typing

Saat pengguna mulai mengetik, teks placeholder akan hilang dan digantikan oleh teks yang dimasukkan.

Tombol “×” akan muncul di sisi kanan kolom untuk memudahkan pengguna menghapus teks pencarian.

Selama pengguna mengetik, sistem dapat menampilkan hasil pencarian yang relevan di bawah kolom input.

Gunakan salah satu dari dua varian hasil pencarian berikut:

Search Result Field: menampilkan daftar hasil dengan detail ringkas.
Search Result Plain: menampilkan hasil dalam bentuk daftar sederhana.

Completed

Setelah pengguna menekan enter atau menyelesaikan pencarian, kata yang dimasukkan akan tetap ditampilkan di dalam kolom. Kondisi ini menandakan bahwa proses pencarian selesai dan pengguna bisa berpindah halaman atau melakukan aksi lain.

Jika komponen searchbar menggunakan item dengan checkbox, nilai yang dipilih akan berubah menjadi chip di dalam kolom input untuk menandai hasil pencarian yang aktif.

Cara Penggunaan yang Disarankan

✅ Disarankan

Gunakan placeholder yang jelas dan kontekstual (misalnya: “Cari pengguna”, “Cari dokumen”).

❌ Dihindari

Hindari penggunaan placeholder yang terlalu umum seperti “Cari...” tanpa konteks.

✅ Disarankan

Berikan hasil pencarian secara instan atau auto-suggestion untuk mempercepat interaksi pengguna.

❌ Dihindari

Jangan menampilkan hasil kosong tanpa pesan konfirmasi.

Penerapan

Mencari draf

Pada menu "Survei dan Kuis", terdapat tab "Draf" yang memungkinkan pengguna mencari draf berdasarkan ID Form.

Selain itu, pengguna juga dapat memfilter hasil pencarian berdasarkan jenis form yang diinginkan.

Mencari kandidat

Pada menu "Pilih Kandidat", pengguna dapat mencari dan memilih kandidat dengan memasukkan NIP. Setelah NIP dimasukkan, sistem akan menampilkan daftar kandidat yang sesuai untuk memudahkan proses seleksi.

Spesifikasi