Currency Input

Forms 1

About

Locale-aware grouping with currency-symbol prefix and configurable decimal precision.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Currency Input to your project and fits it to your theme.

Code

How Currency Input is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"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>
  );
}