Design System
v4.11.0
⌘K

Currency Input

Mobile Support: Full
Jump to Props

Custom formatting and logic for currency inputs

On this page

Import

import { CurrencyInput } from "@vitality-ds/components";

Usage

Use Currency inputs to display currency data. It provides automatic formatting onBlur.

  1. Removes non-digit or decimal point characters
  2. Removes all decimal points other then the first
  3. Removes all decimals past the first 2 (rounding to 2 significant digits with .xx5 rounding up)
  4. If no decimal or decimal point is given, adds ".00" to the
  5. If a single decimal place is given, adds a second "0" to maintain 2 deciaml places
  6. If only decimals is given, adds a "0" before the decimal point

This is not validation, this reformats the value after the user has inputted it.

() => {
  const [cost, setCost] = React.useState("");

  const changeHandler = (event) => {
    setCost(event.target.value);
  };

  return (
    <Stack>
      <CurrencyInput
        value={cost}
        name="cost"
        id="cost"
        onChange={changeHandler}
      />
    </Stack>
  );
};

() => {
  const [cost, setCost] = React.useState("");

  const changeHandler = (event) => {
    setCost(event.target.value);
  };

  return (
    <DocsBox
      css={{
        padding: 64,
        maxWidth: 400,
        boxShadow: "$md",
        backgroundColor: "$neutral1",
        borderRadius: "$default",
      }}
    >
      <Stack align="stretch" spacing="lg">
        <Typography variant="pageTitle">Invoice for Joe Bloggs</Typography>
        <Typography color="lowContrast">
          Please add the total cost of the procedure and the Medicare details to
          proceed.
        </Typography>
        <FormField
          type="currency"
          label="Total cost"
          value={cost}
          onChange={changeHandler}
        />
        <FormField type="text" label="Medicare" />
        <Button appearance="primary">Save</Button>
      </Stack>
    </DocsBox>
  );
};

Forwarding refs

CurrencyInput accepts forwarded refs should you need to pass one, and ref.current return a reference to the underlying input field.

() => {
  const inputRef = React.useRef();

  React.useEffect(() => {
    console.log(inputRef);
  }, []);

  function handleChange() {
    function getRandomRGB() {
      return Math.floor(Math.random() * 255);
    }
    const rgb = `rgb(${getRandomRGB()}, ${getRandomRGB()}, ${getRandomRGB()})`;
    inputRef.current.style.background = rgb;
  }

  return (
    <DocsFlex css={{ flexGrow: 1, flexDirection: "column" }}>
      <label htmlFor="name">Name</label>
      <CurrencyInput
        ref={inputRef}
        name="name"
        id="name"
        onChange={() => handleChange()}
      />
    </DocsFlex>
  );
};

Figma Library

Figma.logo

Props

adornEnd

Description

Content to "adorn" the end of the input - typically text, icons or buttons.

Type

{ type: "text"; props: TextAdornmentProps; }

className

Type

never

currencyCode

Type

"AED" | "AFN" | "ALL" | "AMD" | "ANG" | "AOA" | "ARS" | "AUD" | "AWG" | "AZN" | "BAM" | "BBD" | "BDT" | "BGN" | "BHD" | "BIF" | "BMD" | "BND" | "BOB" | "BOV" | "BRL" | "BSD" | "BTN" | "BWP" | "BYN" | "BZD" | "CAD" | "CDF" | "CHE" | "CHF" | "CHW" | "CLF" | "CLP" | "CNY" | "COP" | "COU" | "CRC" | "CUC" | "CUP" | "CVE" | "CZK" | "DJF" | "DKK" | "DOP" | "DZD" | "EGP" | "ERN" | "ETB" | "EUR" | "FJD" | "FKP" | "GBP" | "GEL" | "GHS" | "GIP" | "GMD" | "GNF" | "GTQ" | "GYD" | "HKD" | "HNL" | "HRK" | "HTG" | "HUF" | "IDR" | "ILS" | "INR" | "IQD" | "IRR" | "ISK" | "JMD" | "JOD" | "JPY" | "KES" | "KGS" | "KHR" | "KMF" | "KPW" | "KRW" | "KWD" | "KYD" | "KZT" | "LAK" | "LBP" | "LKR" | "LRD" | "LSL" | "LYD" | "MAD" | "MDL" | "MGA" | "MKD" | "MMK" | "MNT" | "MOP" | "MRU" | "MUR" | "MVR" | "MWK" | "MXN" | "MXV" | "MYR" | "MZN" | "NAD" | "NGN" | "NIO" | "NOK" | "NPR" | "NZD" | "OMR" | "PAB" | "PEN" | "PGK" | "PHP" | "PKR" | "PLN" | "PYG" | "QAR" | "RON" | "RSD" | "RUB" | "RWF" | "SAR" | "SBD" | "SCR" | "SDG" | "SEK" | "SGD" | "SHP" | "SLE" | "SLL" | "SOS" | "SRD" | "SSP" | "STN" | "SVC" | "SYP" | "SZL" | "THB" | "TJS" | "TMT" | "TND" | "TOP" | "TRY" | "TTD" | "TWD" | "TZS" | "UAH" | "UGX" | "USD" | "USN" | "UYI" | "UYU" | "UYW" | "UZS" | "VED" | "VES" | "VND" | "VUV" | "WST" | "XAF" | "XAG" | "XAU" | "XBA" | "XBB" | "XBC" | "XBD" | "XCD" | "XDR" | "XOF" | "XPD" | "XPF" | "XPT" | "XSU" | "XTS" | "XUA" | "XXX" | "YER" | "ZAR" | "ZMW" | "ZWL"

currencySymbol

Type

"$" | "€" | "£" | "¥" | "₣" | "₹" | "₻" | "₽" | "₾" | "₺" | "₼" | "₸" | "₴" | "₷" | "฿" | "원" | "₫" | "₮" | "₯" | "₱" | "₳" | "₵" | "₲" | "₪" | "₰"

Default Value

$

disabled

Description

Determines whether the user has the ability to interact with the input.

Type

boolean

Default Value

false

hasError

Description

Adds additional styling to indicate failed validation.

Type

boolean

Default Value

false

id

Description

The id of the input. Used to connect label to input.

Type

string

maskProps

Description

Mask Props

Type

MaskProps

name

Description

The name of the text input. Submitted with its owning form as part of a name/value pair.

Type

string

onChange

Description

The callback function. Triggered when any character is added or removed from the input.

Type

ChangeEventHandler<HTMLInputElement> & ((e: ChangeEvent<HTMLInputElement>) => void)

placeholder

Description

Shows an example of what could be inputted. Only visible when no value is present. Commonly used as a "pseudo" helper message.

Type

string

style

Type

never

textAlign

Description

aligns the Text of the input

Type

("left" | "right"

value

Description

The inputted value. Can be used to prepopulate data.

Type

(string | number | readonly string[]) & string

© 2025