Pola
Angka, uang & tanggal
Format Rupiah penuh dan ringkas, terbilang, persen, dan tanggal Bahasa Indonesia. Semua format tersedia sebagai fungsi di
@divistant/circca-react, jadi tidak perlu ditulis ulang di tiap aplikasi.Uang
Ubah angkanya untuk melihat ketiga bentuk.
- PenuhPO, invoice, faktur, tabel
- Rp 1.060.000.000
- RingkasDashboard, kartu ringkasan, grafik
- Rp 1,06 M
- TerbilangTeks bantuan nilai kontrak & invoice
- satu miliar enam puluh juta rupiah
import { useState } from 'react';
import { AmountInput, FormField, formatMoney, terbilang } from '@divistant/circca-react';
// Satu nilai, tiga bentuk: penuh untuk dokumen, ringkas untuk dashboard, terbilang untuk kontrak & invoice.
export default function Example() {
const [nilai, setNilai] = useState<number | null>(1_060_000_000);
const n = nilai ?? 0;
return (
<div className="grid max-w-xl gap-5">
<FormField label="Nilai" helperText="Ubah angkanya untuk melihat ketiga bentuk.">
<AmountInput value={nilai} onValueChange={setNilai} />
</FormField>
<dl className="grid overflow-hidden rounded-2xl border-[0.5px] border-default bg-default">
{[
['Penuh', 'PO, invoice, faktur, tabel', <span key="v" className="tabular-nums">{formatMoney(n)}</span>],
['Ringkas', 'Dashboard, kartu ringkasan, grafik', <span key="v" className="tabular-nums">{formatMoney(n, { compact: true })}</span>],
['Terbilang', 'Teks bantuan nilai kontrak & invoice', <span key="v">{n ? `${terbilang(n)} rupiah` : '—'}</span>],
].map(([label, use, value]) => (
<div key={label as string} className="grid gap-1 border-b-[0.5px] border-muted px-4 py-3 last:border-b-0 sm:grid-cols-[160px_1fr]">
<dt className="grid">
<span className="type-body-default-semibold text-default">{label}</span>
<span className="type-footnote-default text-muted">{use}</span>
</dt>
<dd className="self-center type-body-default text-default">{value}</dd>
</div>
))}
</dl>
</div>
);
}- 1Dokumen memakai nilai penuhPO, invoice, faktur, dan tabel item: "Rp 150.000.000". Tanpa desimal untuk Rupiah.
- 2Ringkasan memakai bentuk ringkasDashboard, kartu ringkasan, dan grafik: "Rp 150 jt", "Rp 1,06 M". Satuan: rb, jt, M (miliar), T (triliun).
- 3Rata kanan dan tabularKolom angka rata kanan dengan tabular-nums agar digit sejajar dan mudah dibandingkan. Simbol mata uang di judul kolom ("Nilai (Rp)") bila semua baris Rupiah.
- 4Simpan angka, format di tampilanNilai disimpan sebagai number. Format hanya saat ditampilkan — jangan menyimpan teks "Rp 150.000.000".
| 150.000.000 |
| 45.000.000 |
| 1.250.000 |
| 210.000.000 |
| 150.000.000 |
| 45.000.000 |
| 1.250.000 |
| 210.000.000 |
Persen
- 1Koma desimal, tanpa spasi"6,2%", "12%". Satu desimal untuk margin dan progres; bilangan bulat untuk pajak dan termin.
Tanggal
| style | Hasil | Dipakai untuk |
|---|---|---|
| short | 13 Sep 2026 | Tabel, meta, StagePath |
| long | 13 September 2026 | Isi dokumen & surat |
| full | Senin, 5 Oktober 2026 | Judul hari, jadwal |
| relative | hari ini | Tenggat & aktivitas — dekat hari ini |
| relative | besok | Tenggat besok |
| relative | 9 Okt 2026 | Lebih dari sehari → tanggal pendek |
import { formatDate } from '@divistant/circca-react';
// "Hari ini" contoh = Senin, 5 Oktober 2026 (sama dengan data contoh Figma BizOps).
const HARI_INI = new Date(2026, 9, 5);
const CONTOH = [
{ style: 'short', tanggal: new Date(2026, 8, 13), pakai: 'Tabel, meta, StagePath' },
{ style: 'long', tanggal: new Date(2026, 8, 13), pakai: 'Isi dokumen & surat' },
{ style: 'full', tanggal: HARI_INI, pakai: 'Judul hari, jadwal' },
{ style: 'relative', tanggal: HARI_INI, pakai: 'Tenggat & aktivitas — dekat hari ini' },
{ style: 'relative', tanggal: new Date(2026, 9, 6), pakai: 'Tenggat besok' },
{ style: 'relative', tanggal: new Date(2026, 9, 9), pakai: 'Lebih dari sehari → tanggal pendek' },
] as const;
export default function Example() {
return (
<div className="overflow-hidden rounded-2xl border-[0.5px] border-default bg-default">
<table className="w-full border-collapse text-left">
<thead>
<tr className="type-footnote-medium text-muted">
<th className="px-4 py-2 font-[inherit]">style</th>
<th className="px-4 py-2 font-[inherit]">Hasil</th>
<th className="px-4 py-2 font-[inherit]">Dipakai untuk</th>
</tr>
</thead>
<tbody className="type-body-default">
{CONTOH.map((c, i) => (
<tr key={i} className="border-t-[0.5px] border-muted">
<td className="px-4 py-2.5 font-mono text-[13px] text-accent-fg">{c.style}</td>
<td className="px-4 py-2.5 text-default">{formatDate(c.tanggal, { style: c.style, now: HARI_INI })}</td>
<td className="px-4 py-2.5 text-muted">{c.pakai}</td>
</tr>
))}
</tbody>
</table>
</div>
);
}- 1Nama bulan, bukan angka"13 Sep 2026", bukan "13/09/2026" — tidak tertukar antara format hari/bulan dan bulan/hari.
- 2Relatif hanya untuk yang dekat"hari ini", "besok", "kemarin" untuk tenggat dan aktivitas. Selebihnya tanggal pendek.
- 3Jam dengan titik"10.42" (format Indonesia), tanpa detik, dan tanpa AM/PM.
Fungsi
tsx
import { formatDate, formatMoney, terbilang } from '@divistant/circca-react';
formatMoney(150_000_000); // "Rp 150.000.000"
formatMoney(1_060_000_000, { compact: true }); // "Rp 1,06 M"
formatMoney(1250.5, { currency: 'USD' }); // "$ 1.250,50"
terbilang(150_000_000); // "seratus lima puluh juta"
formatDate('2026-09-13'); // "13 Sep 2026"
formatDate(tenggat, { style: 'relative' }); // "hari ini" / "besok" / "9 Okt 2026"