Skip to content

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

Free

Currency Input Input Group for Ark UI

Dollar and euro amount fields, with the symbol before the number and the currency code after.

Two amount fields, both with the placeholder 0.00. The first shows $ before the number and USD after it. The second shows a euro sign and EUR. Each field is text with a decimal keyboard, not a number spinner.

Use it when the currency is fixed and should be obvious on both sides. If people pick the currency, use a Select beside the amount. In React, Ark UI does not format the number.

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 Group anatomy: root, addon, input, text, button

Usage

<div className="flex w-full max-w-sm flex-col gap-4">
  <InputGroup className="bg-background">
    <InputGroupInput
      aria-label="Amount in US dollars"
      inputMode="decimal"
      placeholder="0.00"
      type="text"
    />
    <InputGroupAddon>
      <InputGroupText>$</InputGroupText>
    </InputGroupAddon>
    <InputGroupAddon align="inline-end">
      <InputGroupText>USD</InputGroupText>
    </InputGroupAddon>
  </InputGroup>
  <InputGroup className="bg-background">
    <InputGroupInput
      aria-label="Amount in euros"
      inputMode="decimal"
      placeholder="0.00"
      type="text"
    />
    <InputGroupAddon>
      <InputGroupText>€</InputGroupText>
    </InputGroupAddon>
    <InputGroupAddon align="inline-end">
      <InputGroupText>EUR</InputGroupText>
    </InputGroupAddon>
  </InputGroup>
</div>

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.

API Reference

Input Group

Sets aria-label="Amount in US dollars", inputMode="decimal", placeholder="0.00", type="text", align="inline-end" and aria-label="Amount in euros". The rest is on the Input Group page.

All 39 input group examples