# @commercetools-uikit/money-input > A controlled input component for money values with validation states. Latest version **20.6.7** (published 2026-07-17) · MIT license · 0 weekly downloads ## Install ```sh npm install @commercetools-uikit/money-input pnpm add @commercetools-uikit/money-input yarn add @commercetools-uikit/money-input bun add @commercetools-uikit/money-input ``` ## Health **Score 65/100 (B)** — status: active. Positive: has types; esm support; no vulnerabilities; has provenance; high maintenance score. Warnings: low downloads. ## Facts | | | |---|---| | Version | 20.6.7 | | Published | 2026-07-17 | | First published | 2019-11-29 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Dependencies | 14 | | Unpacked size | 704.2 KB | | Known vulnerabilities | 0 | | Install scripts | no | | Provenance | attested (GitHub Actions) | | GitHub stars | 154 | | Maintainers | emmenko, commercetools-admin, tdeekens | | Keywords | javascript, typescript, design-system, react, uikit | ## Links - npm: https://www.npmjs.com/package/@commercetools-uikit/money-input - Repository: https://github.com/commercetools/ui-kit - Homepage: https://uikit.commercetools.com - Issues: https://github.com/commercetools/ui-kit/issues - npm.io page: https://npm.io/package/@commercetools-uikit/money-input ## Dependencies (14) - [lodash](https://npm.io/package/lodash.md) 4.18.1 - [react-select](https://npm.io/package/react-select.md) 5.10.2 - [@babel/runtime](https://npm.io/package/@babel/runtime.md) ^7.20.13 - [@emotion/react](https://npm.io/package/@emotion/react.md) ^11.10.5 - [@emotion/styled](https://npm.io/package/@emotion/styled.md) ^11.10.5 - [@babel/runtime-corejs3](https://npm.io/package/@babel/runtime-corejs3.md) ^7.20.13 - [@commercetools-uikit/hooks](https://npm.io/package/@commercetools-uikit/hooks.md) ^20.6.7 - [@commercetools-uikit/icons](https://npm.io/package/@commercetools-uikit/icons.md) ^20.6.7 - [@commercetools-uikit/utils](https://npm.io/package/@commercetools-uikit/utils.md) ^20.6.7 - [@commercetools-uikit/tooltip](https://npm.io/package/@commercetools-uikit/tooltip.md) ^20.6.7 - [@commercetools-uikit/constraints](https://npm.io/package/@commercetools-uikit/constraints.md) ^20.6.7 - [@commercetools-uikit/input-utils](https://npm.io/package/@commercetools-uikit/input-utils.md) ^20.6.7 - [@commercetools-uikit/select-utils](https://npm.io/package/@commercetools-uikit/select-utils.md) ^20.6.7 - [@commercetools-uikit/design-system](https://npm.io/package/@commercetools-uikit/design-system.md) ^20.6.7 ## Recent versions - 20.6.7 (latest) — 2026-07-17 - 0.0.0-canary-20261022115605 (canary) — 2026-10-22 - 0.0.0-FEC-938-ui-kit-post-pnpm-tooling-polish-catalogs-bundlewatch-bundlesize-20260518121756 (FEC-938-ui-kit-post-pnpm-tooling-polish-catalogs-bundlewatch-bundlesize) — 2026-05-18 - 0.0.0-migration-pnpm-20260513114959 (migration-pnpm) — 2026-05-13 - 0.0.0-CRAFT-2040-rich-text-input-destroys-hyperlink-tag-20260219190637 (CRAFT-2040-rich-text-input-destroys-hyperlink-tag) — 2026-02-19 - 0.0.0-fec-155-react-19-20250528075244 (fec-155-react-19) — 2025-05-28 - 0.0.0-FCT-1500-adjust-legacy-css-reset-20250527090339 (FCT-1500-adjust-legacy-css-reset) — 2025-05-27 - 0.0.0-SUPPORT-32352-de-ch-money-input-20250509174254 (SUPPORT-32352-de-ch-money-input) — 2025-05-09 - 0.0.0-main-20250115172531 (main) — 2025-01-15 - 0.0.0-preview-fec-155-react-19-20250113184401 (preview-fec-155-react-19) — 2025-01-13 - 0.0.0-preview-test-icon-entrypoints-20241212201418 (preview-test-icon-entrypoints) — 2024-12-12 - 0.0.0-preview-test-icon-pure-annotations-20241211181046 (preview-test-icon-pure-annotations) — 2024-12-11 - 0.0.0-preview-test-icon-bundle-20241210182318 (preview-test-icon-bundle) — 2024-12-10 - 0.0.0-preview-test-canary-preview-20241204111237 (preview-test-canary-preview) — 2024-12-04 - 0.0.0-preview-FCT-1187-20241024123200 (preview) — 2024-10-24 - … 1217 more at https://npm.io/package/@commercetools-uikit/money-input/versions ## README # MoneyInput ## Description A controlled input component for money values with validation states. ## Installation ``` pnpm add @commercetools-uikit/money-input ``` ``` npm --save install @commercetools-uikit/money-input ``` Additionally install the peer dependencies (if not present) ``` pnpm add react react-dom react-intl ``` ``` npm --save install react react-dom react-intl ``` ## Usage ```jsx import MoneyInput from '@commercetools-uikit/money-input'; const Example = () => ( { // alert(event.target.name, event.target.value) } } currencies={['EUR', 'USD']} /> ); export default Example; ``` ## Properties | Props | Type | Required | Default | Description | | ------------------------- | ----------------------------------------------------------------------------------------------------- | :------: | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `id` | `string` | | | Used as HTML id property. An id is auto-generated when it is not specified. | | `autoComplete` | `string` | | | Used as HTML `autocomplete` property | | `aria-invalid` | `boolean` | | | Indicate if the value entered in the input is invalid. | | `aria-errormessage` | `string` | | | HTML ID of an element containing an error message related to the input. | | `name` | `string` | | | The prefix used to create a HTML `name` property for the amount input field (`${name}.amount`) and the currency dropdown (`${name}.currencyCode`). | | `value` | `Object`
[See signature.](#signature-value) | ✅ | | Value of the input. Consists of the currency code and an amount. `amount` is a string representing the amount. A dot has to be used as the decimal separator. | | `currencies` | `Array: string[]` | | `[]` | List of possible currencies. When not provided or empty, the component renders a label with the value's currency instead of a dropdown. | | `placeholder` | `string` | | | Placeholder text for the input | | `onBlur` | `Function`
[See signature.](#signature-onblur) | | | Called when input is blurred | | `onFocus` | `Function`
[See signature.](#signature-onfocus) | | | Called when input is focused | | `isCondensed` | `boolean` | | | Use this property to reduce the paddings of the component for a ui compact variant | | `isDisabled` | `boolean` | | | Indicates that the input cannot be modified (e.g not authorized, or changes currently saving). | | `isReadOnly` | `boolean` | | | Indicates that the field is displaying read-only content | | `isAutofocussed` | `boolean` | | | Focus the input on initial render | | `onChange` | `Function`
[See signature.](#signature-onchange) | | | Called with the event of the input or dropdown when either the currency or the amount have changed. | | `menuPortalTarget` | `ReactSelectProps['menuPortalTarget']` | | | Dom element to portal the currency select menu to
[Props from React select was used](https://react-select.com/props) | | `menuPortalZIndex` | `number` | | `1` | z-index value for the currency select menu portal
Use in conjunction with `menuPortalTarget` | | `menuShouldBlockScroll` | `ReactSelectProps['menuShouldBlockScroll']` | | | whether the menu should block scroll while open
[Props from React select was used](https://react-select.com/props) | | `hasError` | `boolean` | | | Indicates that input has errors | | `hasWarning` | `boolean` | | | Control to indicate on the input if there are selected values that are potentially invalid | | `hasHighPrecisionBadge` | `boolean` | | | Shows high precision badge in case current value uses high precision. | | `horizontalConstraint` | `union`
Possible values:
`, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto'` | | `'scale'` | Horizontal size limit of the input fields. | | `isCurrencyInputDisabled` | `boolean` | | | Indicates that the currency input cannot be modified. | ## Signatures ### Signature `value` ```ts { amount: string; currencyCode: TCurrencyCode | ''; } ``` ### Signature `onBlur` ```ts (event: TCustomEvent) => void ``` ### Signature `onFocus` ```ts (event: TCustomEvent) => void ``` ### Signature `onChange` ```ts (event: TCustomEvent) => void ``` ## Static methods ### `MoneyInput.convertToMoneyValue` The `convertToMoneyValue` function will turn a `MoneyInput` value into a [`MoneyValue`](https://docs.commercetools.com/http-api-types#money) the API can handle. It automatically converts to `centPrecision` or `highPrecision` types when the number of supplied fraction digits exceeds the number of fraction digits used by the currency. If you want to forbid `highPrecision`, then the form's validation needs to add an error when it sees a `highPrecision` price. See example below. Here are examples of `centPrecision` and `highPrecision` prices. ```js // 42.00 € { "type": "centPrecision", "currencyCode": "EUR", "centAmount": 4200, "fractionDigits": 2 } ``` ```js // 0.0123456 € { "type": "highPrecision", "currencyCode": "EUR", "centAmount": 1, "preciseAmount": 123456, "fractionDigits": 7 } ``` ### `MoneyInput.parseMoneyValue` The `parseMoneyValue` function will turn a [`MoneyValue`](https://docs.commercetools.com/http-api-types#money) into a value the `MoneyInput` component can handle `({ amount, currencyCode })`. ### `MoneyInput.isEmpty` The `isEmpty` function will return `true` when the passed `MoneyInput` value is empty (either has no currency or no amount, or does not exist at all). ```js MoneyInput.isEmpty({ amount: '', currencyCode: 'EUR' }); // -> true MoneyInput.isEmpty({ amount: '5', currencyCode: '' }); // -> true MoneyInput.isEmpty(); // -> true MoneyInput.isEmpty({ amount: '5', currencyCode: 'EUR' }); // -> false ``` ### `MoneyInput.isTouched` The `isTouched` function will return `true` when all input elements were touched (currency dropdown and amount input). ```js MoneyInput.isTouched({ amount: true, currencyCode: true }); // -> true MoneyInput.isTouched({ amount: true }); // -> false MoneyInput.isTouched({ currencyCode: true }); // -> false MoneyInput.isTouched({ amount: false, currencyCode: false }); // -> false MoneyInput.isTouched({}); // -> false ``` ### `MoneyInput.getCurrencyDropdownId` **`getCurrencyDropdownId(idPrefix)`** Returns the `id` of the currency dropdown. This is useful in case you want to create a label for the input field. You can use it as ```js MoneyInput.getCurrencyDropdownId('price'); // -> "price.currencyCode" ``` ### `MoneyInput.getAmountInputId(idPrefix)` Returns the `id` of the amount input. This is useful in case you want to create a label for the input field. You can use it as ```js MoneyInput.getAmountInputId('price'); // -> "price.amount" ``` ### `MoneyInput.isHighPrecision` The `isHighPrecision` function will return `true` when a `MoneyInput` value is passed for which the number of fraction digits of the amount exceeds the number of fraction digits the supplied currency usually uses. The function may not be called with empty money values. It will throw in those cases. ```js MoneyInput.isHighPrecision({ amount: '2.00', currencyCode: 'EUR' }, 'en'); // -> false MoneyInput.isHighPrecision({ amount: '2.001', currencyCode: 'EUR' }, 'en'); // -> true MoneyInput.isHighPrecision({ amount: '2.001', currencyCode: 'EUR' }, 'de'); // -> false MoneyInput.isHighPrecision({ amount: '2,001', currencyCode: 'EUR' }, 'de'); // -> true MoneyInput.isHighPrecision({ amount: '', currencyCode: 'EUR' }, 'en'); // -> throws ``` ## Examples Here's an example of how `MoneyInput` would be used inside a form. ```jsx import { IntlProvider } from 'react-intl'; import { Formik } from 'formik'; import omitEmpty from 'omit-empty-es'; import { ErrorMessage } from '@commercetools-uikit/messages'; import MoneyInput from '@commercetools-uikit/money-input'; const currencies = ['EUR', 'USD', 'AED', 'KWD']; // the existing document, e.g. from the database const doc = { somePrice: { type: 'centPrecision', currencyCode: 'EUR', centAmount: 4200, fractionDigits: 2, }, }; // A function to convert a document to form values. const docToFormValues = (aDoc) => ({ // The parseMoneyValue function will turn a MoneyValue into a // value the MoneyInput component can handle ({ amount, currencyCode }) somePrice: MoneyInput.parseMoneyValue(aDoc.somePrice), }); // a function to convert form values back to a document const formValuesToDoc = (formValues, locale) => ({ // The convertToMoneyValue function will turn a MoneyInput // value into a value the API can handle // It automatically converts to centPrecision or highPrecision // depending on the number of supplied fraction digits and the // used currency code. // If you want to forbid highPrecision, then the form's validation // needs to add an error when it sees a highPrecision price. // See example below somePrice: MoneyInput.convertToMoneyValue(formValues.somePrice, locale), }); const validate = (formValues, locale) => { const errors = { somePrice: {} }; const moneyValue = MoneyInput.convertToMoneyValue( formValues.somePrice, locale ); // convertToMoneyValue returns null whenever the value is invalid if (!moneyValue) { errors.somePrice.missing = true; } else if (moneyValue.type === 'highPrecision') { // This form does not allow highPrecision prices errors.somePrice.highPrecision = true; } return omitEmpty(errors); }; const initialValues = docToFormValues(doc); return ( { // doc will contain "somePrice" holding a MoneyValue, // ready to be consumed by the API const nextDoc = formValuesToDoc(formValues); console.log(nextDoc); }} render={({ values, errors, touched, setFieldValue, setFieldTouched, handleSubmit, isSubmitting, }) => (
setFieldTouched('somePrice')} isDisabled={isSubmitting} onChange={(value) => setFieldValue('somePrice', value)} hasError={ MoneyInput.isTouched(touched.somePrice) && Boolean(errors.somePrice) } horizontalConstraint={10} /> {touched.somePrice && errors.somePrice && errors.somePrice.missing && ( This field is required! )} {touched.somePrice && errors.somePrice && errors.somePrice.highPrecision && ( High precision prices are not supported here! )} )} /> ); ``` --- _Source: https://npm.io/package/@commercetools-uikit/money-input · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._