Skip to content

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

Free

Currency Input Input Group for Solid

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

UI library: Ark UI

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 Solid, Ark UI does not format the number.

Preview

Preview width

Installation

MCP · Pro
Make your AI a shadcn expert
Your agent installs components, builds pages and restyles your app from one prompt, in Claude Code, Cursor or VS Code.
Get MCPSee plans
Part of Pro

Anatomy

Input Group anatomy: root, addon, input, text, button

Usage

<div class="flex w-full max-w-sm flex-col gap-4">
    <InputGroup class="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 class="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