19.13.0 • Published 8 months ago

@commercetools-uikit/multiline-text-input v19.13.0

Weekly downloads
3,908
License
MIT
Repository
github
Last release
8 months ago

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

PropsTypeRequiredDefaultDescription
namestringUsed as HTML name of the input component. property
aria-invalidbooleanIndicate if the value entered in the input is invalid.
aria-errormessagestringHTML ID of an element containing an error message related to the input.
autoCompletestringUsed as HTML autocomplete property
idstringUsed as HTML id property. An id is auto-generated when it is not specified.
valuestringValue of the input component.
onChangeChangeEventHandlerCalled with an event containing the new value. Required when input is not read only. Parent should pass it back as value.
onBlurFocusEventHandlerCalled when input is blurred
onFocusFocusEventHandlerCalled when input is focused
isAutofocussedbooleanFocus the input on initial render
defaultExpandMultilineTextbooleanfalseExpands multiline text input initially
isDisabledbooleanIndicates that the input cannot be modified (e.g not authorized, or changes currently saving).
isReadOnlybooleanIndicates that the field is displaying read-only content
placeholderstringPlaceholder text for the input
hasErrorbooleanIndicates that input has errors
hasWarningbooleanControl to indicate on the input if there are selected values that are potentially invalid
horizontalConstraintunionPossible values:, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto'Horizontal size limit of the input fields.
rightActionIconReactElementCustom action icon to be displayed on the right side of the input. Will only show, if rightActionProps is provided.
rightActionPropsTSecondaryButtonIconPropsProps for the right-action icon-button. Required when rightActionIcon is provided. At least a label and an onClick prop/function need to be provided.
isCondensedbooleanSet this to true to reduce the paddings of the input allowing the input to display more data in less space.
maxRowsnumberSet this to value to determine the maximum text rows of the text area. Any text overflow past this row number would implement a scroll

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

19.13.0

8 months ago

19.12.1

8 months ago

19.11.0

9 months ago

19.12.0

9 months ago

19.10.0

10 months ago

19.8.0

11 months ago

19.6.0

12 months ago

19.4.0

1 year ago

19.7.0

11 months ago

19.5.0

1 year ago

19.9.0

11 months ago

19.3.1

1 year ago

19.3.0

1 year ago

19.2.0

1 year ago

19.1.0

1 year ago

19.0.0

1 year ago

18.5.0

1 year ago

18.4.0

1 year ago

18.3.0

1 year ago

18.2.0

1 year ago

18.1.0

1 year ago

18.0.0

1 year ago

17.1.0

1 year ago

17.0.1

1 year ago

17.0.0

1 year ago

16.12.1

2 years ago

16.12.0

2 years ago

16.5.0

2 years ago

16.9.0

2 years ago

16.7.3

2 years ago

16.7.2

2 years ago

16.7.1

2 years ago

16.7.0

2 years ago

16.7.5

2 years ago

16.7.4

2 years ago

16.10.0

2 years ago

16.6.1

2 years ago

16.6.0

2 years ago

16.4.1

2 years ago

16.8.0

2 years ago

16.11.0

2 years ago

16.4.0

2 years ago

16.3.0

2 years ago

16.2.1

2 years ago

16.2.0

2 years ago

16.1.1

2 years ago

16.1.0

2 years ago

15.15.0

2 years ago

15.15.1

2 years ago

16.0.0

2 years ago

15.13.2

2 years ago

15.14.3

2 years ago

15.14.1

2 years ago

15.14.2

2 years ago

15.14.0

2 years ago

15.13.1

2 years ago

15.13.0

2 years ago

15.12.0

2 years ago

15.9.0

2 years ago

15.10.0

2 years ago

15.11.2

2 years ago

15.11.0

2 years ago

15.11.1

2 years ago

15.7.0

2 years ago

15.8.0

2 years ago

15.5.0

3 years ago

15.5.1

3 years ago

15.6.0

3 years ago

15.4.0

3 years ago

15.3.0

3 years ago

15.2.4

3 years ago

15.2.1

3 years ago

15.2.2

3 years ago

15.2.3

3 years ago

15.1.1

3 years ago

15.1.2

3 years ago

15.1.0

3 years ago

15.2.0

3 years ago

15.0.0

3 years ago

14.0.2

3 years ago

14.0.3

3 years ago

14.0.6

3 years ago

13.0.4

3 years ago

14.0.0

3 years ago

14.0.1

3 years ago

13.0.2

3 years ago

13.0.0

3 years ago

13.0.1

3 years ago

12.2.9

3 years ago

12.2.5

4 years ago

12.2.6

4 years ago

12.2.7

4 years ago

12.2.4

4 years ago

12.2.3

4 years ago

12.2.2

4 years ago

12.2.1

4 years ago

12.2.0

4 years ago

12.1.0

4 years ago

12.0.12

4 years ago

12.0.8

4 years ago

12.0.7

4 years ago

12.0.3

4 years ago

12.0.4

4 years ago

12.0.6

4 years ago

12.0.2

4 years ago

12.0.0

4 years ago

11.3.0

4 years ago

11.2.1

4 years ago

11.2.0

4 years ago

11.0.2

4 years ago

11.0.1

4 years ago

10.47.4

4 years ago

10.47.3

4 years ago

10.47.0

4 years ago

10.46.3

4 years ago

10.46.2

4 years ago

10.46.1

4 years ago

10.45.0

4 years ago

10.44.4

4 years ago

10.44.3

4 years ago

10.44.1

4 years ago

10.44.0

4 years ago

10.43.3

4 years ago

10.43.2

4 years ago

10.43.1

4 years ago

10.42.3

5 years ago

10.42.2

5 years ago

10.42.0

5 years ago

10.42.1

5 years ago

10.41.0

5 years ago

10.40.0

5 years ago

10.40.1

5 years ago

10.39.8

5 years ago

10.39.7

5 years ago

10.39.6

5 years ago

10.39.4

5 years ago

10.39.3

5 years ago

10.39.2

5 years ago

10.39.1

5 years ago

10.38.0

5 years ago

10.37.1

5 years ago

10.36.0

5 years ago

10.35.1

5 years ago

10.34.1

5 years ago

10.33.0

5 years ago

10.32.0

5 years ago

10.30.1

5 years ago

10.30.0

5 years ago

10.27.1

5 years ago

10.27.0

5 years ago

10.24.0

5 years ago

10.23.0

5 years ago

10.22.1

5 years ago

10.22.0

5 years ago

10.21.0

5 years ago

10.20.0

5 years ago

10.19.0

5 years ago

10.18.7-canary.5

5 years ago

10.18.7-canary.6

5 years ago

10.18.7-canary.7

5 years ago

10.18.7-canary.4

5 years ago

10.18.7-canary.3

5 years ago

10.18.7-canary.2

5 years ago

10.18.7-canary.1

5 years ago

10.18.6-canary.1

5 years ago

10.18.7-canary.0

5 years ago

10.18.5-canary.4

5 years ago

10.18.6-canary.0

5 years ago

10.18.5

5 years ago

10.18.5-canary.3

5 years ago

10.18.5-canary.2

5 years ago

10.18.5-canary.1

5 years ago

10.18.5-canary.0

5 years ago

10.18.4

5 years ago

10.18.4-canary.9

5 years ago

10.18.4-canary.8

5 years ago

10.18.4-canary.7

5 years ago

10.18.4-canary.6

5 years ago

10.18.4-canary.3

5 years ago

10.18.4-canary.4

5 years ago

10.18.4-canary.5

5 years ago

10.18.4-canary.1

5 years ago

10.18.4-canary.2

5 years ago

10.18.4-canary.0

5 years ago

10.18.3-canary.2

5 years ago

10.18.3-canary.3

5 years ago

10.18.3-canary.1

5 years ago

10.18.3-canary.0

5 years ago

10.18.2

5 years ago

10.18.2-canary.3

5 years ago

10.18.2-canary.2

5 years ago

10.18.2-canary.1

5 years ago

10.17.1-canary.3

5 years ago

10.17.1-canary.2

5 years ago

10.18.2-canary.0

5 years ago

10.18.1-canary.0

5 years ago

10.18.0

5 years ago

10.17.1-canary.1

5 years ago

10.18.0-alpha.0

5 years ago

10.17.0

5 years ago

10.17.1-canary.0

5 years ago

10.16.1-canary.8

5 years ago

10.16.1-canary.7

5 years ago

10.16.1-canary.5

5 years ago

10.16.1-canary.6

5 years ago

10.16.1-canary.4

5 years ago

10.16.1-canary.3

5 years ago

10.16.1-canary.2

5 years ago

10.16.1-canary.1

5 years ago

10.16.1-canary.0

5 years ago

10.16.0

5 years ago

10.15.2-canary.4

5 years ago

10.15.2-canary.3

5 years ago

10.15.2-canary.0

5 years ago

10.15.2-canary.1

5 years ago

10.15.2-canary.2

5 years ago

10.15.1

5 years ago

10.15.1-canary.6

5 years ago

10.15.1-canary.4

5 years ago

10.15.0

5 years ago

10.14.3-canary.4

5 years ago

10.14.3-canary.1

5 years ago

10.14.1

5 years ago

10.14.1-canary.8

5 years ago

10.14.1-canary.7

5 years ago

10.14.1-canary.3

5 years ago

10.13.0

6 years ago

11.0.0-alpha.11

6 years ago

11.0.0-alpha.10

6 years ago

11.0.0-alpha.9

6 years ago

11.0.0-alpha.6

6 years ago

11.0.0-alpha.7

6 years ago

11.0.0-alpha.8

6 years ago

11.0.0-alpha.5

6 years ago

11.0.0-alpha.3

6 years ago

11.0.0-alpha.4

6 years ago

11.0.0-alpha.2

6 years ago

11.0.0-alpha.1

6 years ago

11.0.0-alpha.0

6 years ago