title: Currency Input storybookPath: forms-currency-input--default isExperimentalPackage: true
Currency input provides a way for inputting money values. Note that this
component is similar to the FloatInput
component with
the difference that this component has 2 fraction digits enforced and a currency
symbol starting adornment.
Examples
const [value, setValue] = React.useState(1000);
return (
<Stack gap="large">
<Field label="Example controlled">
<CurrencyInput value={value} onChange={v => setValue(v)} />
</Field>
<Text>The current value is: {value}</Text>
</Stack>
);
Currency Symbol Adornment
You can specify what currency type you'd like for the currency symbol adornment at the start of the input component. If unspecified, the currency symbol adornment will default to AUD. Note that the currency codes are references to the respective currency's ISO 4217 currency codes.
<Stack gap="large">
<Field label="Currency symbols">
<CurrencyInput currencyType="EUR" />
<CurrencyInput currencyType="RMB" />
<CurrencyInput currencyType="KRW" />
</Field>
</Stack>
Note that CurrencyInput
also extends FloatInput
's
props and are not listed here.