Input

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

export default function Example() {
  return (
    <div className="grid max-w-sm gap-3">
      <Input size="sm" placeholder="Small · 24 (tabel, filter)" aria-label="Contoh small" />
      <Input size="md" placeholder="Medium · 28 (default)" aria-label="Contoh medium" />
      <Input size="lg" placeholder="Large · 36 (form lega, layar sentuh)" aria-label="Contoh large" />
    </div>
  );
}

import { FormField, Input } from '@divistant/circca-react';
import { EnvelopeSimple, MagnifyingGlass } from '@phosphor-icons/react';

export default function Example() {
  return (
    <div className="grid max-w-md gap-4">
      <Input leadingVisual={MagnifyingGlass} placeholder="Cari nomor PO, customer…" aria-label="Cari" />
      <FormField label="Margin">
        <Input suffix="%" defaultValue="7,5" inputClassName="text-right" />
      </FormField>
      <FormField label="Termin pembayaran">
        <Input suffix="hari" defaultValue="30" inputClassName="text-right" />
      </FormField>
      <FormField label="E-mail PIC">
        <Input type="email" leadingVisual={EnvelopeSimple} placeholder="nama@perusahaan.co.id" />
      </FormField>
    </div>
  );
}