@commercetools-uikit/multiline-text-input

A controlled text input component for multi-line strings with validation states.

Usage no npm install needed!

<script type="module">
  import commercetoolsUikitMultilineTextInput from 'https://cdn.skypack.dev/@commercetools-uikit/multiline-text-input';
</script>

README

MultilineTextInput

Description

A controlled text input component for multi-line strings with validation states.

Installation

yarn add @commercetools-uikit/multiline-text-input
npm --save install @commercetools-uikit/multiline-text-input

Additionally install the peer dependencies (if not present)

yarn add react react-intl
npm --save install react react-intl

Usage

import MultilineTextInput from '@commercetools-uikit/multiline-text-input';

const Example = () => (
  <MultilineTextInput
    value="foo"
    onChange={
      (/** event */) => {
        // alert(event.target.value)
      }
    }
  />
);

export default Example;

Properties

Props Type Required Default Description
name string Used as HTML name of the input component. property
autoComplete string Used as HTML autocomplete property
id string Used as HTML id property. An id is auto-generated when it is not specified.
value string Value of the input component.
onChange ChangeEventHandler Called with an event containing the new value. Required when input is not read only. Parent should pass it back as value.
onBlur FocusEventHandler Called when input is blurred
onFocus FocusEventHandler Called when input is focused
isAutofocussed boolean Focus the input on initial render
defaultExpandMultilineText boolean false Expands multiline text input initially
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
placeholder string Placeholder text for the input
hasError boolean Indicates that input has errors
hasWarning boolean Control to indicate on the input if there are selected values that are potentially invalid
horizontalConstraint union
Possible values:
, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto'
Horizontal size limit of the input fields.

Static methods

MultilineTextInput.isEmpty

Returns true when the value is considered empty, which is when the value is empty or consists of spaces and linebreaks only.

MultilineTextInput.isEmpty(''); // -> true
MultilineTextInput.isEmpty(' '); // -> true
MultilineTextInput.isEmpty('\n'); // -> true
MultilineTextInput.isEmpty('tree'); // -> false

Dos and don'ts

  • Whenever a user input can hold multiline strings this MultilineTextInput component is recommended

  • Not recommended to be used when the content is single-lined (e.g email address, password etc.)

  • The horizontal constraint is not recommended to be smaller than s since content may cut off