Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Currency Input for React

An Amount field with a dollar icon inside it, a one-cent step, the placeholder 0.00, and a line that the amount is in USD.

An Amount label, a dollar icon inside the field, and the placeholder 0.00. Under it, the line says the amount is in USD. It is a number field that steps by one cent.

Use it for a price, a payment, or a budget in dollars. Step buttons that keep a minimum for you are Number Input. In React, Base UI does not put the dollar sign into the value.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

Anatomy

Input anatomy: input, placeholder, value, caret

Usage

<Field className="w-full max-w-sm">
  <FieldLabel htmlFor="currency-amount">Amount</FieldLabel>
  <InputGroup className="bg-background">
    <InputGroupInput
      id="currency-amount"
      min="0"
      placeholder="0.00"
      step="0.01"
      type="number"
    />
    <InputGroupAddon>
      <DollarSignIcon aria-hidden="true" />
    </InputGroupAddon>
  </InputGroup>
  <FieldDescription>Enter amount in USD</FieldDescription>
</Field>

FAQ

What does type number give this field?

A number field. step is 0.01, so the arrows and the browser's validation work in cents, and min is 0, so the browser rejects a negative amount when the form is submitted. The placeholder 0.00 hints at the format.

How is the icon placed inside the field?

The field is an InputGroup: InputGroupInput is the input and InputGroupAddon holds DollarSignIcon. The addon comes after the input in the markup and sits at the inline start, so it is on the left in left-to-right text and on the right in right-to-left text. Clicking it focuses the input.

Is the icon read by screen readers?

No. DollarSignIcon has aria-hidden, because the Amount label already names the field. The icon is a visual hint only.

How is Amount tied to the field?

Clicking the label focuses the field, and screen readers announce it with the field. FieldLabel sets htmlFor to currency-amount, the input's id.

Does the value include the dollar sign?

No. The icon is outside the input, so the value is a plain number such as 19.99. The currency is named by the icon and by the description, Enter amount in USD.

How do I use another currency?

Swap the icon, for example EuroIcon or PoundSterlingIcon, and change the description. For a currency code instead of a symbol, put the text in the addon with InputGroupText.

API Reference

Field

Sets htmlFor="currency-amount". The rest is on the Field page.

Input Group

Sets id="currency-amount", min="0", placeholder="0.00", step="0.01" and type="number". The rest is on the Input Group page.

All 24 input examples