Anatomi
Jenis dan variasi
Ukuran
Chips memiliki 2 ukuran (Regular dan Small) yang bisa disesuaikan dengan kebutuhan masing-masing.
Non-Active dan Active
Chips memiliki 2 macam variasi yang menandakan pilihan mana yang sedang dipilih oleh pengguna. Varian aktif digunakan ketika opsi terkait sedang menjadi opsi yang berlaku dalam sistem, sedangkan varian nonaktif digunakan pada situasi sebaliknya.
Icon
Leading (Optional)
Chips dapat berisi ikon atau logo di depan. Gunakan ikon sistem untuk membantu mengidentifikasi kategori chips.
Trailing (Optional)
Chips dapat berisi ikon atau logo di belakang. Gunakan ikon di belakang untuk menambahkan aksi sekunder seperti menutup Chips atau close.
States
Terdapat 5 states untuk Chips, yakni Default, Hovered, Focused, Pressed, dan Disabled. Berikut contoh gambar dan penjelasannya:
Non-Active
Active
Behaviors
Keyboard focus
Chips dapat dinavigasi menggunakan keyboard. Status keyboard focus mengambil status visual hover tombol Chips dan menambahkan cincin biru ke Chips dalam fokus.
Panduan penggunaan
Chips membantu pengguna memasukkan informasi, membuat pilihan, memfilter konten, atau memicu tindakan.
Chips bukan Button
Chips mendukung dan memperkaya perjalanan pengguna tanpa mengganggu fokus alur utama, sedangkan Button berfungsi sebagai pendorong utama untuk melanjutkan alur atau menyelesaikan tugas penting. Button memiliki hierarki visual yang lebih tinggi dibandingkan Chips untuk memastikan mereka menarik perhatian pada tindakan utama.
Disarankan
Gunakan Chips untuk menyajikan opsi kontekstual dan tambahan.
Dihindari
Hindari mengganti tindakan utama dengan Chips. Tindakan yang membawa pengguna ke langkah berikutnya atau sebelumnya harus selalu ditampilkan sebagai Button
Memfilter konten
Chips dapat digunakan untuk memfilter atau menyaring konten. Contohnya seperti hasil pencarian.
Assist Chips
Assist Chips dapat memicu tindakan sekunder pada pengalaman pengguna.
Penempatan
Input Chips dapat diintegrasikan dengan komponen lain. Chips ini dapat muncul:
- Dalam daftar yang dapat digulir secara horizontal. Untuk pengguna yang tidak ahli dalam teknologi, variasi ini tidak direkomendasikan karena mudah dilewatkan oleh pengguna.
- Dalam daftar bertumpuk.
Jarak antar Chips
Jaga jarak minimum 8dp antar Chips.
Panduan penulisan
Chips memiliki fungsi spesifik dengan area penulisan yang terbatas, maka pertimbangkan untuk:
Menampilkan jenis kategorisasi
Menampilkan jenis kategorisasi yang berhubungan atau sesuai dengan konten yang akan disaring oleh pengguna.
Menghindari penggunaan call to action
Chips tidak akan menggantikan tombol aksi, maka sebaiknya tidak menggunakan kata kerja/call to action.
Pakai maksimal 3-4 kata
Idealnya, chips menggunakan 1-2 kata saja. Namun jika memang tidak memungkinkan, sebisa mungkin gunakan tidak lebih dari 4 kata (termasuk karakter) untuk menyesuaikan area yang terbatas.