Skip to main content

Currency input

Currency input in Storybook
note

There are deprecated versions of this component. Switch to a version of the docs older than 10.0.x to view their docs.

Examples​

Check out the Usage section for details about how and when to use the CurrencyInput component.

Input with only one currency available​

The CurrencyInput component is part of the @jutro/components package. It is mandatory to provide the availableCurrencies property (an array), with at least one element. If only one option is provided, the currency selection will not be editable and it will display that option.

You can also use the currencyDisplay property to determine whether to display the currency symbol ($, €, £...) or the code (USD, EUR, GBP...).

If you need to set an initial value, the initiaValue property can receive an object with 2 attributes: amount and currency.

import CurrencyInput from '@jutro/components';

// ...

<CurrencyInput
  availableCurrencies={['USD']}
  initialValue={{
    amount: 15467,
    currency: 'USD',
  }}
  label="Currency input component"
  currencyDisplay="code"
  tooltip={{
    text: 'This is a tooltip',
    trigger: 'mouseenter',
  }}
/>;

Input with multiple currencies​

As in the previous example, you need to set the availableCurrencies property with the list of currencies (using the currency code) available for selection:

import CurrencyInput from '@jutro/components';

// ...

<CurrencyInput
  availableCurrencies={['USD', 'EUR', 'GBP']}
  initialValue={{
    amount: 15467,
    currency: 'GBP',
  }}
  label="Currency input component"
/>;

User input validation on change​

The onChange event takes the new value you enter as its second parameter and uses it for the validation. If you want to display an error, use the stateMessages property:

import { useCallback, useState } from 'react';
import { CurrencyInput } from '@jutro/components';

export function CurrencyInputValidation() {
  const [validationMessages, setValidationMessages] = useState({});

  const onChange = useCallback((e, newValue) => {
    const componentValue = newValue.amount;

    if (!componentValue || componentValue != 10) {
      setValidationMessages({
        error: ["The value must be 10. If it's not, we won't not accept it."],
      });
    } else {
      setValidationMessages({});
    }
  }, []);

  return (
    <CurrencyInput
      availableCurrencies={['USD']}
      label="Accept only 10"
      secondaryLabel="Will raise an error except when value is 10"
      stateMessages={validationMessages}
      onChange={onChange}
    />
  );
}

Controlled component​

You can use the value property for the controlled component scenario:

import { useState } from 'react';
import { CurrencyInput, NumberInput } from '@jutro/components';

export function CurrencyInputControlled() {
  const [updatedValue, setAmount] = useState({
    amount: 200,
    currency: 'USD',
  });

  const onChange = (e, newValue) => {
    setAmount({ amount: newValue, currency: 'USD' });
  };

  return (
    <div>
      <NumberInput
        label="Enter the amount to be assigned to the next field"
        onChange={onChange}
      />
      <CurrencyInput
        availableCurrencies={['USD']}
        label="Changes with the above"
        secondaryLabel="This value is automatically updated when the value in the first field changes"
        value={updatedValue}
      />
    </div>
  );
}

Accessing ref property to set focus (Imperative Handler)​

The currency input and other inputs, all allow the use of a ref property to access some native behaviors. However, only certain features are exposed. In this example, when you click the button, the focus will automatically be set in the currency input below.

import { useRef } from 'react';
import { CurrencyInput, Button } from '@jutro/components';

export function CurrencyInputRef() {
  const currencyRef = useRef(null);

  const setFocus = (e) => {
    currencyRef?.current?.focus();
  };

  return (
    <div>
      <Button
        label="Set focus on currency input"
        onClick={setFocus}></Button>
      <CurrencyInput
        availableCurrencies={['USD']}
        label="Get the focus from the button"
        ref={currencyRef}
      />
    </div>
  );
}
Legal and Support Information
Copyright © 2001-2024 Guidewire Software, Inc.