Currency Field

Currency Fields allow users to input an amount of money.

Usage

Currency fields allow users to input an amount of money, by default this is GBP.


Edit live code
<CurrencyField id="saving" label="Saving" characters={10} /><CurrencyField id="saving" label="Saving" characters={10} />

Variations

Changing currency

The currency icon can be changed, GBP, EUR, AUD and USD are currently supported.


Edit live code
<CurrencyField id="saving" label="Saving" currency="EUR" /><CurrencyField id="saving" label="Saving" currency="EUR" />

Icon alignment

In some territories the convention is to place the currency symbol after the value, rather than before it. Use iconAlignment="right" to switch to this layout — behaviour is otherwise unchanged, and the icon alignment is independent of the chosen currency.


Edit live code
<CurrencyField
  id="saving"
  label="Saving"
  currency="EUR"
  iconAlignment="right"
  hint="For example, 25,50 €"
/><CurrencyField
  id="saving"
  label="Saving"
  currency="EUR"
  iconAlignment="right"
  hint="For example, 25,50 €"
/>

Props

Name	Values	Default
id (required)	String
label (required)	String
optional	Boolean	false
hint	ReactNode
error	ReactNode
characters	Number	25
fullWidth	alwaysneversmall	small
currency	GBPEURAUDUSD	GBP
iconAlignment	leftright	left
...	JSX.IntrinsicElements["input"]