Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Input Group examples · Text

Currency Input Input Group for React

Dollar and euro amount inputs with the symbol before and the currency code after.

Framework
UI library

Money fields that say their currency twice, the symbol before the amount and the code after: $ … USD and € … EUR, each as InputGroupText in addons around the input.

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

FAQ

How do the symbol and the code sit on both sides?

The symbol's addon keeps the default inline-start; the code's has align="inline-end". Both come after the input.

How is the amount input set up?

type="text" with inputMode="decimal": a numeric keyboard with a decimal point, and no spinner arrows or rounding from type="number".

How are the inputs labeled?

aria-labels that include the currency: Amount in US dollars and Amount in euros.

How do I format the amount?

Parse and format on blur with Intl.NumberFormat for the currency, and store the number, not the string.

Can people change the currency?

Not here. Put a menu in the end addon, as in URL Builder with Dropdown.

What happens on a click on $ or USD?

A click on the addon's empty space focuses the input, because the addon looks for the group's input. Clicks on a button inside the addon stay on that button.

All 39 input group examples