Komponen / Form & input
SearchField
Kolom pencarian kapsul dengan tombol hapus: cari PO, invoice, atau customer di atas daftar dan di dalam panel.
Import
tsx
import { SearchField } from '@divistant/circca-react';Props
Juga menerima atribut <input> (name, placeholder, autoFocus, onKeyDown, …). ref menunjuk ke <input>.
| Prop | Tipe | Default | Keterangan |
|---|---|---|---|
| value | string | — | Nilai terkendali; pasangkan dengan onValueChange. |
| defaultValue | string | '' | Nilai awal bila tidak dikendalikan. |
| onValueChange | (value: string) => void | — | Dipanggil setiap teks berubah, termasuk saat dikosongkan lewat tombol hapus atau Esc. |
| onClear | () => void | — | Dipanggil setelah teks dikosongkan lewat tombol hapus atau Esc. |
| size | 'sm' | 'md' | 'sm' | Small 24 (Callout, ikon 13) atau Medium 28 (Body, ikon 14). |
| placeholder | string | 'Cari' | Sebut apa yang bisa dicari: "Cari no. PO, customer". |
| clearLabel | string | 'Hapus pencarian' | Label tombol hapus untuk pembaca layar. |
| invalid / disabled / readOnly | boolean | false | Mengikuti FormField bila dibungkus. |
| inputClassName | string | — | Kelas untuk elemen <input>; className dipasang ke kapsul. |
| className | string | — | Kelas tambahan untuk kapsul, mis. lebar (w-[220px]). |
Sumber
Kode komponen ada di packages/react/src/components/search-field. Gaya hanya memakai kelas token Circca HIG — tidak ada warna, spasi, atau radius mentah.