Currency Input React component for Tailwind CSS v4

Add to a project

Requirements: React 19 and Tailwind CSS v4, in Next.js (App Router or Pages), Vite or React Router. Installation guide · Next.js setup · Vite setup

Currency Input is part of Pro, with 298 more Pro items: $8 a month or $150 once. 14-day refund before you download any Pro item. See plans

Usage

Import CurrencyInput from @/components/ui/currency-input.

import { useState } from "react"
import { CurrencyInput } from "@/components/ui/currency-input"

export function ListingPrice() {
  const [price, setPrice] = useState<number | null>(1250)
  const [currency, setCurrency] = useState("USD")

  return (
    <form className="flex flex-col gap-4">
      <CurrencyInput
        name="price"
        currencyName="currency"
        label="Price"
        description="The price includes tax"
        locale="en-US"
        currencies={["USD", "EUR", "GBP"]}
        currency={currency}
        onCurrencyChange={setCurrency}
        value={price}
        onValueChange={setPrice}
        min={1}
        error={price !== null && price < 1 ? "The minimum price is $1" : undefined}
        required
      />
      <CurrencyInput label="Donation" locale="en-US" presets={[50, 100, 200, 500]} defaultValue={100} clearable />
    </form>
  )
}

Props

• labeldefault ""
  ReactNode

  Renders the field anatomy around the box and links it to the input with htmlFor. Leave it empty for a bare field.

• descriptiondefault ""
  ReactNode

  Helper text under the box, linked with aria-describedby (followed by a hidden "Amount in …" naming the currency). The error takes its place while it shows.

• errordefault ""
  ReactNode

  Replaces the description with the animated error and marks the field invalid (red ring, aria-invalid).

• requireddefault false
  boolean

  The mark after the label, and required on the input, so native form validation stops an empty submit.

• invaliddefault false
  boolean

  The invalid look and aria-invalid without a message. An amount outside min and max sets it on its own until it is back in range.

• disableddefault false
  boolean

  Dims the field to 50%, blocks typing, the currency button and the chips, and leaves the hidden inputs out of the submit.

• readOnlydefault false
  boolean

  The amount stays visible and selectable; typing, the arrows, the currency list and the chips stop.

• placeholderdefault ""
  string

  Hint text while the field is empty. Empty shows zero in the locale and the currency's decimals ("0.00" in en-US, "0" for JPY).

• namedefault ""
  string

  Renders a hidden input with this name and the amount as "1234.56" (dot decimal, empty when null), so FormData gets a number, not the formatted text. The visible input has no name.

• currencyNamedefault ""
  string

  With a currency selector, a second hidden form field with the chosen code ("EUR").

• sizedefault "md"
  "sm" | "md" | "lg"

  32 / 40 / 48px, like a button. md grows to 44px on touch screens and the text is 16px on phones so iOS never zooms.

• variantdefault "soft"
  "soft" | "outline" | "underline" | "ghost"

  The box: a soft fill, an outline, a bottom border that grows a bar on focus, or ghost for tables and toolbars.

• radiusdefault "md"
  "none" | "sm" | "md" | "lg" | "full"

  Corner shape, scaled per size like the button (md is 8 / 10 / 12px); the currency button follows it. Ignored by underline.

• currencyDisplaydefault "narrowSymbol"
  "narrowSymbol" | "symbol" | "code" | "name"

  How the currency reads next to the amount and on the chips: narrowSymbol is what people write ("$", "€", "lei"), symbol and code print "RON" for lei, name spells it out ("US dollars").

• defaultCurrencydefault "USD"
  string

  The starting ISO 4217 code while uncontrolled. Its decimals (USD 2, JPY 0) and symbol follow.

• localedefault ""
  string

  Formats and parses with this locale: separators, and which side the symbol goes on. Empty uses the nearest LocaleProvider, then the page language. The demo passes "en-US".

• mindefault -90071992547409
  number

  The lowest amount. A lower typed amount shows invalid and is clamped on blur; the arrows stop here. Without allowNegative nothing goes below 0 anyway.

• maxdefault 90071992547409
  number

  The highest amount, the same way. Anything above Number.MAX_SAFE_INTEGER / 100 cannot be typed at all.

• decimalsdefault -1
  number

  Fraction digits typed and padded to (0 to 6). The default -1 takes the currency's: USD 2, JPY 0, BHD 3.

• allowNegativedefault false
  boolean

  Lets a minus in (a balance adjustment, a refund). iOS decimal keypads have no minus key: negatives come from ArrowDown or a hardware keyboard.

• stepdefault 1
  number

  What ArrowUp and ArrowDown add or take away; Shift moves ten steps.

• clearabledefault false
  boolean

  An x at the end while there is an amount; Escape clears too. Focus stays in the field.

• selectOnFocusdefault true
  boolean

  Selects the whole amount when the field takes focus (a click too), so typing replaces it.

• responsivedefault true
  boolean

  The currency list becomes a bottom sheet below 768px.

• value
  number | null

  The controlled amount in major units (1234.56); null is an empty field. An amount outside min and max shows as given and is flagged invalid.

• defaultValuedefault "null"
  number | null

  The starting amount while uncontrolled. A form reset returns to it.

• onValueChange
  (value: number | null) => void

  Every change: live while typing (unclamped until blur), arrows, chips, clearing, and the rounding when a currency with fewer decimals is picked.

• onChange
  (event: ChangeEvent<HTMLInputElement>) => void

  The native input event, for keystrokes the field accepts.

• currency
  string

  The controlled ISO 4217 code. Switching currency never converts the amount.

• onCurrencyChange
  (currency: string) => void

  When a currency is picked from the selector.

• currencies
  string[]

  Two or more codes show the currency selector: a compact code button at the end of the box, opening a list with the localized names ("US dollar", "Euro") and symbols. With the selector, a suffix symbol is left out (the button names the currency); a prefix one ($) stays.

• presets
  number[]

  Quick amounts as chips under the field ("$50", "$100"), 44px hit areas on touch. The chip equal to the amount is solid and aria-pressed.

• labels
  Partial<{ currency: string; clear: string; presets: string; amountIn: (currencyName: string) => string }>

  Accessible names, merged over English defaults: currency ("Currency", the button reads "Currency: USD" and titles the phone sheet), clear ("Clear"), presets ("Quick amounts", the chips group) and amountIn (n => `Amount in ${n}`, read with the field).

• container
  HTMLElement | null

  Portal target for the currency list. Defaults to document.body.

• fieldProps
  Partial<FieldProps>

  Anything else for the Field wrapper: optional and optionalLabel, labelAction, orientation, labelWidth, hideLabel.

• id
  string

  The input's id. Defaults to useId(); inside a <Field> the Field's id wins.

• ref
  RefObject<HTMLInputElement | null> or (node) => void

  The native text input. Every other native prop lands there too: inputMode (decimal), enterKeyHint (done), autoComplete (transaction-amount), onBlur, onKeyDown, aria-* and data-*.

• classNames
  Partial<Record<"field" | "label" | "description" | "error" | "counter" | "box" | "input" | "symbol" | "currency" | "clear" | "presets" | "preset", string>>

  Extra classes for the inner parts. box targets the field box, input the native element, currency the code button, preset every chip.

• className
  string

  Classes for the outermost element: the Field root when there is a label, description or error, else the box (or the column holding box and chips).

FAQ

Used in

More React input components