SearchField

import { useState } from 'react';
import { SearchField } from '@divistant/circca-react';

// Small (24) untuk toolbar & panel; Medium (28) di atas daftar dokumen, sejajar FilterChip.
// Tombol hapus muncul saat ada teks; Esc juga mengosongkan.
export default function Example() {
  const [q, setQ] = useState('PO-2026-014');
  return (
    <div className="grid w-full max-w-sm gap-3">
      <SearchField aria-label="Cari customer" placeholder="Cari customer" />
      <SearchField size="md" aria-label="Cari PO" placeholder="Cari no. PO, customer" value={q} onValueChange={setQ} />
      <SearchField size="md" aria-label="Cari invoice" placeholder="Cari invoice" disabled />
    </div>
  );
}

import { useMemo, useState } from 'react';
import { FormField, SearchField } from '@divistant/circca-react';

const CUSTOMER = [
  'PT Pelanggan Contoh A',
  'PT Arunika Data',
  'PT Samudra Farma',
  'PT Kawan Retail Indonesia',
  'CV Sinar Logistik',
  'PT Mitra Energi Persada',
];

// Dalam FormField: label terhubung otomatis. Daftar tersaring langsung saat mengetik; jumlah hasil diumumkan (aria-live).
export default function Example() {
  const [q, setQ] = useState('');
  const hasil = useMemo(() => CUSTOMER.filter(c => c.toLowerCase().includes(q.trim().toLowerCase())), [q]);
  return (
    <div className="grid w-full max-w-sm gap-2">
      <FormField label="Customer" helperText="Cari berdasarkan nama perusahaan.">
        <SearchField size="md" placeholder="Cari customer" value={q} onValueChange={setQ} />
      </FormField>
      <p aria-live="polite" className="type-footnote-default text-muted">
        {hasil.length} customer
      </p>
      <ul className="grid gap-1 type-callout-default text-default">
        {hasil.map(c => (
          <li key={c}>{c}</li>
        ))}
      </ul>
    </div>
  );
}