Currency Input - HapplyUI

A composed currency input with inline currency symbol and currency selector dropdown. Built on Input and Select primitives.

Installation

bunx @happlyui/cli@latest add currency-input

Dependencies

Registry dependencies

These are automatically installed when you add this component.

form-field-context
use-form-field-binding
input
select

Usage

import * as CurrencyInput from "@/components/ui/currency-input"

<CurrencyInput.Root onValueChange={(amount) => console.log(amount)} />

Examples

Default

Currency input with default currencies.

<CurrencyInput.Root onValueChange={(amount) => console.log(amount)} />

Controlled

Fully controlled currency input.

Amount: — | Currency: USD

<CurrencyInput.Root
  value={amount}
  onValueChange={setAmount}
  currency={currency}
  onCurrencyChange={setCurrency}
/>

Sizes

All three input sizes: medium (default), small, and xsmall.

<CurrencyInput.Root size="medium" />
<CurrencyInput.Root size="small" />
<CurrencyInput.Root size="xsmall" />

Error State

Currency input in error state.

<CurrencyInput.Root hasError />

Disabled

Currency input in disabled state.

<CurrencyInput.Root disabled />

With Form Field

Currency input composed with FormField for consistent label and hint.

Amount*

Enter the transaction amount.

<FormField.Root
  label="Amount"
  htmlFor="amount"
  required
  hint="Enter the transaction amount."
>
  <CurrencyInput.Root id="amount" />
</FormField.Root>

API Reference

CurrencyInput.Root

The composed currency input component. Forwards ref to the underlying input element.

Prop	Type	Default	Description
`value`	`string`	-	Amount value (controlled)
`onValueChange`	`(amount: string) => void`	-	Amount change callback
`currency`	`string`	-	Currency code (controlled)
`defaultCurrency`	`string`	`'CAD'`	Default currency code
`onCurrencyChange`	`(currency: string) => void`	-	Currency change callback
`currencies`	`CurrencyOption[]`	-	Available currencies: { code, symbol, label, icon? }
`currencySymbol`	`string`	-	Override the inline currency symbol
`size`	`'medium' \| 'small' \| 'xsmall'`	`'medium'`	Input size
`hasError`	`boolean`	`false`	Error state
`placeholder`	`string`	`'0.00'`	Placeholder text
`disabled`	`boolean`	`false`	Disabled state