Lompat ke isi
CirccaHIG

Komponen / Form & input

FilterChip

Filter daftar berbentuk chip kapsul: "Status ▾" saat kosong, "Status: Draft" saat aktif, dengan tombol × untuk menghapus.
React · BetaFigma · siapFigmaSumber

Kapan dipakai

Gunakan

  • Tampilkan filter yang paling sering dipakai sebagai chip tetap (Status, Customer, Periode, Pemilik), walau belum aktif.
  • Nilai ringkas: satu pilihan ditulis apa adanya ("Draft"), banyak pilihan diringkas ("3 status").
  • Sediakan × di chip aktif agar filter bisa dihapus tanpa membuka pilihan.

Hindari

  • Jangan menulis semua nilai di chip ("Draft, Diproses, PO terbit, Ditagih") — chip memanjang dan baris pecah.
  • Jangan menandai chip aktif hanya dengan warna — nilai harus tertulis.
  • Jangan memakai FilterChip untuk aksi atau navigasi — pakai Button atau SegmentedControl.

Contoh benar & salah

GunakanBanyak pilihan diringkas menjadi jumlah ("3 status").
HindariSemua nilai ditulis sehingga chip terlalu panjang.

Penulisan

  • Field berupa kata benda tunggal berhuruf kapital di awal: "Status", "Pemilik".
  • Nilai memakai istilah yang sama dengan StateLabel di daftar ("Menunggu BAST/DO").

Komponen terkait

Esc
↑↓ pilih↵ buka12 hasil