Komponen / Form & input
FilterChip
Filter daftar berbentuk chip kapsul: "Status ▾" saat kosong, "Status: Draft" saat aktif, dengan tombol × untuk menghapus.
Import
tsx
import { FilterChip } from '@divistant/circca-react';Props
Juga menerima atribut <button> untuk bagian utama (onClick bila tanpa content). ref menunjuk ke bagian utama.
| Prop | Tipe | Default | Keterangan |
|---|---|---|---|
| field | string | — | Nama filter (properti Figma "Field"): "Status", "Customer", "Pemilik", "Periode". |
| value | ReactNode | — | Nilai terpilih (properti Figma "Value"). Kosong = tidak aktif; berisi = aktif. |
| content | ReactNode | — | Isi pilihan di Popover (Checkbox, RadioGroup, …). Tanpa ini, bagian utama memakai onClick. |
| popoverTitle | ReactNode | — | Judul Popover. Tanpa judul, nama aksesibel panel "Filter <field>". |
| popoverFooter | ReactNode | — | Tombol Small di kaki Popover: "Atur ulang" + "Terapkan" (bungkus Popover.Close). |
| popoverClassName | string | — | Kelas untuk panel Popover, mis. lebar. |
| open / defaultOpen | boolean | — | Status Popover (terkontrol / awal). |
| onOpenChange | (open: boolean) => void | — | Dipanggil saat Popover dibuka/ditutup. |
| onRemove | () => void | — | Menghapus filter. Bila diisi dan chip aktif, muncul tombol × "Hapus filter <field>"; fokus kembali ke chip. |
| removeLabel | string | — | Label tombol × untuk pembaca layar. |
| disabled | boolean | false | Nonaktif (opasitas 45%). |
| className | string | — | Kelas tambahan untuk kapsul. |
Sumber
Kode komponen ada di packages/react/src/components/filter-chip. Gaya hanya memakai kelas token Circca HIG — tidak ada warna, spasi, atau radius mentah.