A compound text input that formats a numeric value as locale-aware currency, with a symbol prefix/suffix and configurable decimal precision.
"use client";
import * as React from "react";
import { Field, FieldGroup, FieldLabel } from "@/components/ui/field";
import {
CurrencyInput,
CurrencyInputField,
CurrencyInputPrefix,
} from "@/components/ui/currency-input";
export default function CurrencyInputDemo() {
const [basic, setBasic] = React.useState<number | null>(1499.5);
const [composed, setComposed] = React.useState<number | null>(12480);
return (
<FieldGroup className="max-w-md gap-8">
<Field className="gap-2">
<FieldLabel htmlFor="cur-basic">USD</FieldLabel>
<CurrencyInput
id="cur-basic"
value={basic}
onValueChange={setBasic}
currency="USD"
locale="en-US"
decimals={2}
>
<CurrencyInputPrefix />
<CurrencyInputField />
</CurrencyInput>
<p className="font-mono text-[11px] text-muted-foreground">
parsed: {basic === null ? "null" : basic}
</p>
</Field>
<Field className="gap-2">
<FieldLabel htmlFor="cur-composed">EUR (de-DE)</FieldLabel>
<CurrencyInput
id="cur-composed"
value={composed}
onValueChange={setComposed}
currency="EUR"
locale="de-DE"
decimals={2}
>
<CurrencyInputPrefix />
<CurrencyInputField placeholder="0,00" />
</CurrencyInput>
<p className="font-mono text-[11px] text-muted-foreground">
parsed: {composed === null ? "null" : composed}
</p>
</Field>
</FieldGroup>
);
}
Part of Hirael — browse the full library on 21st.dev.