# Input

- Page: https://jiguang132.com/resources/arco-design/docs/input
- Resource: Arco Design (https://jiguang132.com/resources/arco-design.md)
- All guides: https://jiguang132.com/resources/arco-design/docs.md

The basic form components have been expanded on the basis of native controls and can be used in combination.

## Install

```bash
npm install @arco-design/web-react@2.66.18
```

Import `@arco-design/web-react/dist/css/arco.css` at the entry and set the locale with `ConfigProvider`. React 19 projects must also import `@arco-design/web-react/es/_util/react-19-adapter` first, or imperative APIs such as Message and Modal cannot render.

## Examples

- **Basic**: Input content via mouse or keyboard.
- **Status**: Different Input status.
- **Size**: Input defines four sizes (`mini`, `small`, `default`, `large`), which are 24px, 28px, 32px, and 36px.
- **Front/Post Label**: Specify `addBefore`/`addAfter` to add elements before/after the input box.
- **Prefix/Suffix**: Add a prefix(suffix) in the input box by specifying `prefix`(`suffix`).
- **Search Box**: Input box with search button for content retrieval.
- **Search Box with Loading**: Through the `loading` property, you can set the search box to display `loading` when `onSearch`.
- **Input Group**: Input content via mouse or keyboard.
- **Length Limit**: Set `maxLength` to limit the maximum number of words, and use `showWordLimit` to display word count statistics. Setting `maxLength.errorOnly` will not limit the number of words entered by the user, but if the maximum number of words is exceeded, an error status will be displayed. It is worth noting that if `showWordLimit` is configured, then you cannot use `suffix`.
- **Textarea**: A textarea input example.
- **Autosize Textarea**: Specify `autoSize`, the text field will automatically adjust the height of the text field according to the input text. If you specify `autoSize={{ minRows, maxRows }}`, you can also specify the minimum/maximum number of rows.
- **Password**: Used for password input.
- **Normalize Value**: Format the value entered by the user at the specified time, and when the previous and subsequent values are inconsistent, onChange will be triggered
- **Auto Width**: Through the `autoWidth` attribute, you can set the width of `Input` to adapt to the text.

Examples come from the official Arco Design repository (MIT) at the commit published as npm 2.66.18. Some use online images or upload endpoints; network requests are disabled in previews.

## API

### Input

**Input Accept all native attribute values**

|Property|Description|Type|DefaultValue|Version|
|---|---|---|---|---|
|allowClear|Whether allow clear value|boolean |`-`|-|
|disabled|Whether the input is disabled|boolean |`-`|-|
|error|Whether the input is error.(Deprecated, removed in the next major version, use status='error' instead)|boolean |`-`|-|
|readOnly|Whether the input is readOnly|boolean |`-`|-|
|showWordLimit|With `maxLength`, Show word count.|boolean |`-`|-|
|defaultValue|The initial input content|string |`-`|-|
|placeholder|Input box prompt text|string |`-`|-|
|value|The input content value|string |`-`|-|
|autoWidth|auto width. minWidth defaults to 0, maxWidth defaults to 100%|\| boolean\| { minWidth?: CSSProperties['minWidth']; maxWidth?: CSSProperties['maxWidth'] } |`-`|2.54.0|
|normalizeTrigger|Specify the timing of normalize execution|('onBlur' \| 'onPressEnter')[] |`['onBlur']`|2.50.0|
|size|The size of the input box|'mini' \| 'small' \| 'default' \| 'large' |`default`|-|
|status|Status|'error' \| 'warning' |`-`|2.45.0|
|addAfter|The label text displayed after (on the right side of) the input field|ReactNode |`-`|-|
|addBefore|The label text displayed before (on the left side of) the input field|ReactNode |`-`|-|
|clearIcon|Configure the icon of the clear button when `allowClear`.|ReactNode |`-`|2.50.0|
|prefix|The prefix icon or text for the Input|ReactNode |`-`|-|
|suffix|The suffix icon or text for the Input|ReactNode |`-`|-|
|afterStyle|The additional css style of the `addAfter` element|object |`-`|-|
|beforeStyle|The additional css style of the `addBefore` element|object |`-`|-|
|className|Additional css class|string \| string[] |`-`|-|
|height|Custom input height|number \| string |`-`|-|
|maxLength|The max content length；After setting `errorOnly` to `true`, if `maxLength` is exceeded, the `error` status will be displayed, and user input will not be restricted.|number \| { length: number; errorOnly?: boolean } |`-`|`errorOnly` in 2.23.0|
|style|Additional style|CSSProperties |`-`|-|
|normalize|Format the value entered by the user at the specified time, and when the previous and subsequent values are inconsistent, onChange will be triggered|(value: string) => string |`-`|2.50.0|
|onChange|Callback when user input|(value: string, e) => void |`-`|-|
|onClear|Callback when click clear button|() => void |`-`|-|
|onPressEnter|Callback when press enter key|(e) => void |`-`|-|

### Input.TextArea

|Property|Description|Type|DefaultValue|Version|
|---|---|---|---|---|
|allowClear|Whether allow clear the content|boolean |`-`|2.2.0|
|disabled|Whether the textarea is disabled|boolean |`-`|-|
|error|Whether the textarea is error.(Deprecated, removed in the next major version, use status='error' instead)|boolean |`-`|-|
|defaultValue|To set default value|string |`-`|-|
|placeholder|textarea placeholder|string |`-`|-|
|value|To set value|string |`-`|-|
|status|Status|'error' \| 'warning' |`-`|2.45.0|
|clearIcon|Configure the icon of the clear button when `allowClear`.|ReactNode |`-`|2.50.0|
|autoSize|Height autoSize feature|boolean \| { minRows?: number; maxRows?: number } |`-`|-|
|className|Additional css class|string \| string[] |`-`|-|
|maxLength|The max content length；After setting `errorOnly` to `true`, if `maxLength` is exceeded, the `error` status will be displayed, and user input will not be restricted.|number \| { length: number; errorOnly?: boolean } |`-`|`errorOnly` in 2.23.0|
|style|Additional style|CSSProperties |`-`|-|
|wrapperStyle|With `showWordLimit`, a `div` will be outside the `textarea` tag, and `wrapperStyle` is used to configure the style of it.|CSSProperties |`-`|-|
|wordLimitPosition|The position of the word count|`'inside' \| 'outside'` |`inside`| 2.66.14 |  
|onChange|Callback when user input|(value: string, e) => void |`-`|-|
|onClear|Callback when click clear button|() => void |`-`|2.2.0|
|onPressEnter|Callback when press enter key|(e) => void |`-`|-|

### Input.Group

|Property|Description|Type|DefaultValue|
|---|---|---|---|
|compact|Whether to use compact mode|boolean |`-`|
|className|Additional css class|string \| string[] |`-`|
|style|Additional style|CSSProperties |`-`|

### Input.Search

Contains all the parameters of the Input component

|Property|Description|Type|DefaultValue|Version|
|---|---|---|---|---|
|loading|Show loading status when searching|boolean |`-`|2.6.0|
|searchButton|Search button|boolean \| ReactNode |`-`|`ReactNode` in 2.6.0|
|onSearch|Callback when click search button|(value: string) => void |`-`|-|

### Input.Password

Contains all the parameters of the Input component

|Property|Description|Type|DefaultValue|
|---|---|---|---|
|defaultVisibility|To set default visibility|boolean |`-`|
|visibility|-|boolean |`-`|
|visibilityToggle|Whether to display the button to switch the visible state of the password|boolean |`-`|
|onVisibilityChange|Callback when visibility changes|(visibility: boolean) => void |`-`|

## Method

|Property|Description|Type|Default|
| ------ | :----------: | :--------: | -----: |
| focus  |   Get focus   | `Function` |    `-` |
| blur   | Remove focus | `Function` |    `-` |

**Demo**

```js
<Input ref={(ref) => (this.input = ref)} />;

this.input.focus();
this.input.blur();
```

---

Index of all JGuang resources: https://jiguang132.com/llms.txt