Alternatives

TextInput — For single-line text input
Textarea — For multi-line text input
DurationInput — For amount of time input
SearchInput — For search input
SearchInput — For search input

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.

Edit in Playroom

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.

Edit in Playroom

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.

Edit in Playroom

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

Edit in Playroom

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.

Edit in Playroom

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>
);

Currency Input

Usage

maximumFractionDigits

showAdornment

align

Usage with @balance-web/forms

`maximumFractionDigits`

`showAdornment`

`align`

Usage with `@balance-web/forms`