@spark-web/currency-input

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.