Last modified: August 22, 2025
The CurrencyInput component renders an input field with currency formatting, symbols, and locale-specific display patterns.
Screenshot of an example CurrencyInput component
import { CurrencyInput } from '@hubspot/ui-extensions';

const Extension = () => {
  const [amount, setAmount] = useState(1234.56);
  return (
    <CurrencyInput
      label="Transaction Amount"
      name="amount"
      value={amount}
      onChange={value => setAmount(value)}
      description="Enter the transaction amount"
    />
  );
};
PropTypeDescription
label RequiredStringThe label text to display for the form input element
name RequiredStringThe unique identifier for the input element (like HTML name attribute)
currency RequiredStringISO 4217 currency code (e.g., “USD”, “EUR”, “JPY”)
valueNumber | undefinedThe current value of the input
defaultValueNumber | undefinedThe value of the input on the initial render.
onChange(value: number) => voidCallback when the value changes.
onBlur(value: number) => voidCallback when the input loses focus.
onFocus(value: number) => voidCallback when the input gains focus.
minNumberSets the lower bound of the input (handled by underlying component).
maxNumberSets the upper bound of the input (handled by underlying component).
precisionNumberSets the number of decimal places for the currency. If not provided, defaults to currency-specific precision.
errorBooleanIf true, shows validation message as error; if false, shows as success. Default is false.
validationMessageStringText to show under the input for error/success validation. Default is ''.
requiredBooleanDetermines if the required indicator should be displayed. Default is false.
readOnlyBooleanDetermines if the field is editable. Default is false.
descriptionStringInstructional message to help understand the input’s purpose.
tooltipStringText that appears in a tooltip next to the input label.
placeholderStringText that appears when the input has no value.