CurrencyInput

CurrencyInput keeps the stored value numeric while giving users a currency-formatted display when they leave the field.

#Default usage

<CurrencyInput aria-label="Monthly budget" currency="USD" defaultValue={2499} />

#Import

import { CurrencyInput } from "@froggdesign/enter-ui-react";

#Controlled

<CurrencyInput
  value={amount}
  onValueChange={setAmount}
  currency="USD"
  locale="en-US"
/>

#Patterns

Use CurrencyInput for plan pricing, invoice amounts, budgets, credit limits, and financial settings where the application stores numeric values.

#Accessibility

Provide a visible label or aria-label. invalid maps to aria-invalid and the EnterUI invalid input style.

#API

• value, defaultValue: numeric value or null.
• onValueChange: called with number | null.
• currency: ISO currency code. Defaults to USD.
• locale: formatter locale. Defaults to en-US.
• min, max: clamp emitted numeric values.
• disabled, invalid: state props.

#Styling

CurrencyInput uses .eui-currency-input classes and FroggDesign tokens for layout, state, focus, and disabled styling.