Currency Input

Alternatives

Usage

The CurrencyInput is similar to the TextInput with a couple of small differences. The type of the value is string | number so it can be a string or a number. We represent a valid value as a number and everything else as a string. This makes it easy to pass the value to other systems that accept a float but means that we can still represent invalid values as strings so that validation errors can be shown when the value can't be represented as a number. We'll also format the value of the input using Intl.NumberFormat when the input is blurred.

It shares disabled, read only and validation states with TextInput.

let [value, setValue] = useState('');
return (
  <Stack gap="small">
    <Field label="Example">
      <CurrencyInput value={value} onChange={setValue} />
    </Field>
    <Text>{JSON.stringify(value)}</Text>
    <Text>{typeof value}</Text>
  </Stack>
);

maximumFractionDigits

You can customise the maximum number of digits after the decimal place between 2(the default) and 4. The naming is based on the option that Intl.NumberFormat accepts.

let [value, setValue] = useState(123.456789);
return (
  <Field label="Fraction digits">
    <CurrencyInput
      maximumFractionDigits={4}
      value={value}
      onChange={setValue}
    />
  </Field>
);

showAdornment

You may choose to hide the dollar symbol adornment.

let [value, setValue] = useState(100);
return (
  <Field label="Without adornment">
    <CurrencyInput showAdornment={false} onChange={setValue} value={value} />
  </Field>
);

align

Sets the alignment of the value to left or right

let [value, setValue] = useState(100);
return (
  <Field label="Right aligned">
    <CurrencyInput align="right" onChange={setValue} value={value} />
  </Field>
);

Usage with @balance-web/forms

To use it with @balance-web/forms, you can combine validators to achieve the desired outcome.

let form = useForm(
  field.currency({
    validate: validate((value) => {
      validate.required(value);
      validate.maybeNumber(value);
      validate.positiveNumber(value);
      return value;
    }),
  })
);
const { invalidMessage, ...inputProps } = form.props;
return (
  <Field label="Amount" invalidMessage={invalidMessage}>
    <CurrencyInput {...inputProps} />
  </Field>
);

This component works the same as CurrencyInput above except:

Usage

let form = useForm(
  field.currency({
    validate: validate((value) => {
      validate.required(value);
      validate.maybeNumber(value);
      validate.positiveNumber(value);
      return value;
    }),
  })
);
return (
  <Stack>
    <Field label="Calculator" invalidMessage={form.props.invalidMessage}>
      <CurrencyInputCalculator {...form.props} />
    </Field>
    <Text size="small" color="muted">
      Form value: {form.value}
    </Text>
  </Stack>
);

Emitting values

This component will always emit a string to the onChange handler provided because this component does not make any assumptions around validation and will emit invalid expressions. It's up to the consumer to validate and handle all cases.

For example:

Depending on your UI, you should think about when the show errors to the user. Either on submission or onChange. You will also have to think about anything that treats the output of the calculator field as a number since it's not guaranteed to emit a number. Your calculations might result in NaN which also need to be handled gracefully both in the calculation and the resulting UI.