Skip to content
Telescope
Components

Currency input

An enhanced input field that provides visual and non-visual cues to a user when entering an amount of money in a specified currency.

Basic usage

First, import the component.

import {CurrencyInput} from '@pleo-io/telescope'

The use it, like so:

<CurrencyInput label="Expense amount" value={999.99} currency="EUR" postfix="EUR" locale="en-GB" />

API reference

The component accepts the following props.

Information:

This component is build ontop of the Input component.

PropTypeDefault
currency
string
disabled
boolean
formatterConfig
NumberFormatOptions
innerRef
RefObject<HTMLInputElement>
isInvalid
boolean
isRequired
boolean
label
string
locale
string
Locale.en_GB
name*
string
postfix
enum
prefix
enum
renderError
Function
skeleton
boolean
false
variant
enum
bordered

Examples

See the guidelines page for information around when and why to use the various options.

Required

To ensure accessibility, use the isRequired property (not the HTML required property) to mark a field as required for assistive technologies (such as screen readers).

Information:
Visually, you should mark the minority of fields in a form as "required" or "optional".
<CurrencyInput value="999.95" label="Amount (required)" postfix="EUR" currency="EUR" isRequired />

Invalid

Use the isInvalid property to mark the field as invalid both visually (for sighted users) and for assistive technologies (such as screen readers).

Information:
Always provide a clear error message when marking a field as invalid.
<FormControl maxWidth="200px">
    <FormControl.Label>Expense amount</FormControl.Label>
    <CurrencyInput isInvalid currency="EUR" postfix="EUR" value={0} />
    <FormControl.Error>Enter an amount</FormControl.Error>
</FormControl>

Formatter config

The formatterConfig prop allows you to configure the number formatting (Intl.NumberFormat) of the input field. We primarily use this to control the number of decimal places shown.

Information:

See the guidelines for an example of why you might want to use this.

<CurrencyInput
    // Other props
    formatterConfig={{
        minimumFractionDigits: 0,
        maximumFractionDigits: 0,
    }}
/>

Advanced use cases

For advanced use cases and layouts, use this component in combination with our Form control component to maintain layout consistency and ensure form accessibility. The Form control supports features such as hint text, help popovers and error messages.

<FormControl maxWidth="200px">
    <FormControl.Label>Expense amount</FormControl.Label>
    <CurrencyInput currency="EUR" postfix="EUR" value={999.95} />
</FormControl>

Usage with formik

For the sake of convenience, we provide a Formik version of this component. By using the `useField` hook it automatically handles value changes, blur events, error messages, and touched state for you. We recommend Yup for form validation.

Information:
The validation behaviour of the Formik component may not always be inline with those in our Form guidelines, so please review before usage.
<Formik
    initialValues={{amount: ''}}
    onSubmit={(data) => alert(JSON.stringify(data, null, 2))}
    validationSchema={yup.object().shape({
        amount: yup.string().required('Enter an amount'),
    })}
>
    <Form>
        <Stack space={24}>
            <FormikCurrencyInput
                label="Amount"
                name="amount"
                currency="EUR"
                postfix="EUR"
                isRequired
            />
            <Button type="submit">Submit</Button>
        </Stack>
    </Form>
</Formik>

Accessibility

The implementation of this component has been informed by our form accessibility guidelines.

On this page