TextInput

Description

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

Installation

pnpm add @commercetools-uikit/text-input

npm --save install @commercetools-uikit/text-input

Additionally install the peer dependencies (if not present)

pnpm add react

npm --save install react

Usage

import TextInput from '@commercetools-uikit/text-input';

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

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. | | className | string | | | className forwarded to the underlying <input />. | | name | string | | | Used as HTML name of the input component. property | | 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 | | 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 | | hasError | boolean | | | Indicates if the input has invalid values | | hasWarning | boolean | | | | | placeholder | string | | | Placeholder text for the input | | horizontalConstraint | unionPossible 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. | | maxLength | number | | | Maximum number of characters allowed in the input. If this prop is used, it is recommended to inform the user about this limit in the InputField description, or otherwise. |

data-* props

The component further forwards all data- attributes to the underlying input component.

Static methods

TextInput.isEmpty

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

TextInput.isEmpty(''); // -> true
TextInput.isEmpty(' '); // -> true
TextInput.isEmpty('tree'); // -> false

Main Functions and use cases are:

• Input field for single-line strings