Money Input

Forms 19

About

A currency amount field that groups digits as you type, shows missing cents as faint ghosts, scales long amounts to fit, and returns the value in minor units (cents).

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

Code

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

Usage.tsx

"use client";

import MoneyInput from "@/components/ui/money-input";
import { useState } from "react";

export default function MoneyInputDemo() {
  const [cents, setCents] = useState<number | null>(1500);

  return (
    <div className="flex w-full max-w-sm items-center justify-center p-10">
      <MoneyInput
        label="Amount"
        name="amount"
        value={cents}
        onValueChange={setCents}
        currencies={["USD", "EUR", "GBP"]}
        min={100}
        max={100000}
        quickAdd={[5, 10, 20]}
      />
    </div>
  );
}