# @commercetools-uikit/localized-multiline-text-input > A controlled text input component for localized multi-line strings with validation states. Latest version **20.6.7** (published 2026-07-17) · MIT license · 0 weekly downloads ## Install ```sh npm install @commercetools-uikit/localized-multiline-text-input pnpm add @commercetools-uikit/localized-multiline-text-input yarn add @commercetools-uikit/localized-multiline-text-input bun add @commercetools-uikit/localized-multiline-text-input ``` ## Health **Score 70/100 (B)** — status: active. Positive: has types; esm support; no vulnerabilities; has provenance; recently updated; 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 | 17 | | Unpacked size | 291.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/localized-multiline-text-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/localized-multiline-text-input ## Dependencies (17) - [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 - [react-textarea-autosize](https://npm.io/package/react-textarea-autosize.md) 8.5.9 - [@commercetools-uikit/text](https://npm.io/package/@commercetools-uikit/text.md) ^20.6.7 - [@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/messages](https://npm.io/package/@commercetools-uikit/messages.md) ^20.6.7 - [@commercetools-uikit/constraints](https://npm.io/package/@commercetools-uikit/constraints.md) ^20.6.7 - [@commercetools-uikit/flat-button](https://npm.io/package/@commercetools-uikit/flat-button.md) ^20.6.7 - [@commercetools-uikit/input-utils](https://npm.io/package/@commercetools-uikit/input-utils.md) ^20.6.7 - [@commercetools-uikit/design-system](https://npm.io/package/@commercetools-uikit/design-system.md) ^20.6.7 - [@commercetools-uikit/spacings-stack](https://npm.io/package/@commercetools-uikit/spacings-stack.md) ^20.6.7 - [@commercetools-uikit/localized-utils](https://npm.io/package/@commercetools-uikit/localized-utils.md) ^20.6.7 ## Alternatives - [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads - [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads - [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads - [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads - [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads ## Recent versions - 20.6.7 (latest) — 2026-07-17 - 0.0.0-canary-20260831181816 (canary) — 2026-08-31 - 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 - … 1179 more at https://npm.io/package/@commercetools-uikit/localized-multiline-text-input/versions ## README # LocalizedMultilineTextInput ## Description A controlled text input component for localized multi-line strings with validation states. ## Installation ``` pnpm add @commercetools-uikit/localized-multiline-text-input ``` ``` npm --save install @commercetools-uikit/localized-multiline-text-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 LocalizedMultilineTextInput from '@commercetools-uikit/localized-multiline-text-input'; const Example = () => ( { // alert(event.target.name, event.target.value) } } /> ); export default Example; ``` ## Properties | Props | Type | Required | Default | Description | | ------------------------------- | -------------------------------------------------------------------------------------------- | :------: | --------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `id` | `string` | | | Used as prefix of HTML `id` property. Each input field id will have the language as a suffix (`${idPrefix}.${lang}`), e.g. `foo.en` | | `name` | `string` | | | Used as HTML `name` property for each input field. Each input field name will have the language as a suffix (`${namePrefix}.${lang}`), e.g. `foo.en` | | `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. | | `value` | `Object`
[See signature.](#signature-value) | ✅ | | Values to use. Keyed by language, the values are the actual values, e.g. `{ en: 'Horse', de: 'Pferd' }`
The input doesn't accept a "languages" prop, instead all possible languages have to exist (with empty or filled strings) on the value:
{ en: 'foo', de: '', es: '' } | | `onChange` | `ChangeEventHandler` | | | Gets called when any input is changed. Is called with the change event of the changed input. | | `selectedLanguage` | `string` | ✅ | | Specifies which language will be shown in case the `LocalizedTextInput` is collapsed. | | `onBlur` | `FocusEventHandler` | | | Called when input is blurred | | `onFocus` | `Function`
[See signature.](#signature-onfocus) | | | Called when input is focused | | `defaultExpandMultilineText` | `boolean` | | | Expands input components holding multiline values instead of collpasing them by default. | | `cacheMeasurements` | `boolean` | | `true` | Use this property to turn off caching input measurements. | | `hideLanguageExpansionControls` | `boolean` | | | Will hide the language expansion controls when set to `true`. All languages will be shown when set to `true`. | | `defaultExpandLanguages` | `boolean` | | | Controls whether one or all languages are visible by default. Pass `true` to show all languages by default. | | `isAutofocussed` | `boolean` | | | Sets the focus on the first input when `true` is passed. | | `isCondensed` | `boolean` | | | Use this property to reduce the paddings of the component for a ui compact variant | | `isDisabled` | `boolean` | | | Disables all input fields. | | `isReadOnly` | `boolean` | | | Disables all input fields and shows them in read-only mode. | | `placeholder` | `Object`
[See signature.](#signature-placeholder) | | | Placeholders for each language. Object of the same shape as `value`. | | `horizontalConstraint` | `union`
Possible values:
`, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto'` | | `'scale'` | Horizontal size limit of the input fields. | | `hasError` | `boolean` | | | Will apply the error state to each input without showing any error message. | | `hasWarning` | `boolean` | | | Will apply the warning state to each input without showing any error message. | | `errors` | `Object`
[See signature.](#signature-errors) | | | Used to show errors underneath the inputs of specific locales. Pass an object whose key is a locale and whose value is the error to show for that key. | | `warnings` | `Object`
[See signature.](#signature-warnings) | | | Used to show warnings underneath the inputs of specific locales. Pass an object whose key is a locale and whose value is the warning to show for that key. | | `additionalInfo` | `Record` | | | An object mapping locales to additional messages to be rendered below each input element. Example: { en: 'Some value', es: 'Algún valor', } | ## Signatures ### Signature `value` ```ts { [key: string]: string; } ``` ### Signature `onFocus` ```ts () => void ``` ### Signature `placeholder` ```ts { [key: string]: string; } ``` ### Signature `errors` ```ts { [key: string]: ReactNode; } ``` ### Signature `warnings` ```ts { [key: string]: ReactNode; } ``` ## `data-*` props The component forwards all `data` attribute props. It further adds a `-${language}` suffix to the values of the `data-test` and `data-track-component` attributes, e.g `data-test="foo"` will get added to the input for `en` as `data-test="foo-en"`. Main Functions and use cases are: - Receiving localized input from user ## Static Properties ### `createLocalizedString(languages, existingTranslations)` This function creates a [localized string](https://docs.commercetools.com/http-api-types.html#localizedstring). It merges the `languages` and the language keys of existing translations to form a localized string holding all languages. The `existingTranslations` argument is optional. If it is not passed, an empty localized field will be created. ```js const languages = ['en', 'de']; LocalizedMultilineTextInput.createLocalizedString(languages); // -> { en: '', de: '' } ``` In case existingTranslations is passed, it will merge an empty localized field with the existing translations. Usually this is used to ensure that a localized string contains at least the project's languages. ```js const languages = ['en', 'de']; const existingTranslations = { en: 'Tree', ar: 'شجرة' }; LocalizedMultilineTextInput.createLocalizedString( languages, existingTranslations ); // -> { en: 'Tree', de: '', ar: 'شجرة' } ``` ### `isEmpty(localizedField)` Returns `true` when all values in a localized field are empty. ```js LocalizedMultilineTextInput.isEmpty({}); // -> true ``` ```js LocalizedMultilineTextInput.isEmpty({ en: '', de: ' ' }); // -> true ``` ```js LocalizedMultilineTextInput.isEmpty({ en: 'Tree', de: '' }); // -> false ``` ### `omitEmptyTranslations(localizedField)` Omits translations with empty values. ```js LocalizedMultilineTextInput.omitEmptyTranslations({ en: '', de: ' ' }); // -> {} ``` ```js LocalizedMultilineTextInput.omitEmptyTranslations({ en: 'Tree', de: '' }); // -> { en: 'Tree' } ``` ### `isTouched(touched)` Expects to be called with an object or `undefined`. Returns `true` when at least one value is truthy. ### `RequiredValueErrorMessage` This field exports a default error message which can be used when the field is required, but the user provided no value. You can use it as ```jsx render ( return (
{ isMissing && }
) ) ``` --- _Source: https://npm.io/package/@commercetools-uikit/localized-multiline-text-input · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._