<!-- THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. -->
<!-- This file is created by the `pnpm generate-readme` script. -->

# 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

```jsx
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` | `union`<br/>Possible values:<br/>`, 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.

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

## Main Functions and use cases are:

- Input field for single-line strings