AmountInput

import { useState } from 'react';
import { AmountInput, FormField, terbilang } from '@divistant/circca-react';

export default function Example() {
  const [nilai, setNilai] = useState<number | null>(150_000_000);
  return (
    <div className="grid max-w-sm gap-4">
      <FormField label="Nilai kontrak" required helperText={nilai ? `${terbilang(nilai)} rupiah` : 'Tanpa desimal.'}>
        <AmountInput value={nilai} onValueChange={setNilai} />
      </FormField>
      <p className="type-caption-default text-muted">
        Nilai tersimpan: <code>{JSON.stringify(nilai)}</code>
      </p>
    </div>
  );
}

import { AmountInput, FormField } from '@divistant/circca-react';

export default function Example() {
  return (
    <div className="grid gap-4 sm:grid-cols-2">
      <FormField label="Harga beli (USD)">
        <AmountInput currency="USD" defaultValue={1250.5} />
      </FormField>
      <FormField label="Diskon" helperText="Small — untuk sel tabel & baris item.">
        <AmountInput size="sm" defaultValue={2_500_000} />
      </FormField>
      <FormField label="Total invoice" readOnly>
        <AmountInput defaultValue={165_000_000} />
      </FormField>
      <FormField label="PPN" error="Nilai PPN melebihi 11% dari DPP.">
        <AmountInput defaultValue={20_000_000} />
      </FormField>
    </div>
  );
}