---
title: Input
path: component/input
group: Data Entry
---

## Input

A input widget for buiding forms in React, based on raw input. you can enter content through mouse or keyboard.

### Guides

- Using Input, with prefix or suffix.
- Combining with another widgets, such as combined into a search box.

### API

| Property           | Description                                                            | Type             | Default    | Alternative                            | Required |
| ------------------ | ---------------------------------------------------------------------- | ---------------- | ---------- | -------------------------------------- | -------- |
| className          | a custom CSS class.                                                    | string           | `''`       |                                        | No       |
| width              | width                                                                  | string or number |            |                                        | No       |
| inline             | Inline display                                                         | bool             | `false`    | `true`                                 | No       |
| type               | content type                                                           | string           | `'text'`   | `'number'`、`'password'`、`'textarea'` | No       |
| widthSize          | width size                                																| string           | `'s'` | `'xs'` \| `'m'`    \| `'l'`\| `'xl'`             | 否       |
| size               | size(height)，use `width` to control input width                       | string           | `'normal'` | `'large'` \| `'small'`                 | No       |
| defaultValue       | default value                                                          | string           |            |                                        | No       |
| value              | input value                                                            | string           |            |                                        | No       |
| readOnly           | whether is only read or not                                            | bool             | `false`    |                                        | No       |
| disabled           | whether is disable or not                                              | bool             | `false`    |                                        | No       |
| placeholder        | raw placeholder text                                                   | string           | `''`       |
| showClear          | show clear botton                                                      | bool             | `false`    |                                        | No       |
| addonBefore        | prefix tag                                                             | node             |            |                                        | No       |
| addonAfter         | suffix tag                                                             | node             |            |                                        | No       |
| autoFocus          | auto focus                                                             | bool             | `false`    |                                        | No       |
| autoSelect         | auto select                                                            | bool             | `false`    |                                        | No       |
| initSelectionStart | The 0-based index of the first selected character                      | number           |            |                                        | No       |
| initSelectionEnd   | The 0-based index of the character after the last selected character   | number           |            |                                        | No       |
| onChange           | change event, `e.fromClearButton` is `true` if clear button is clicked | func(e:Event)    |            |                                        | No       |
| onPressEnter       | enter event                                                            | func(e:Event)    |            |                                        | No       |
| icon               | icon                                                                   | string           |            |                                        | No       |
| onIconClick        | icon click event                                                       | func(e:Event)    |            |                                        | No       |

_Except for the attributes listed above, `Input` supports all attributes that React supports for native input._

#### textarea

| Property          | Description                       | Type   | Default | Alternative | Required |
| ----------------- | --------------------------------- | ------ | ------- | ----------- | -------- |
| maxLength         | Max length of the value           | number |         |             | No       |
| showCount         | Show character count              | bool   | false   |             | No       |
| autoSize          | Auto resize on value change       | bool   | false   |             | No       |
| maxCharacterCount | Check the max length of the value | number |         |             | No       |

#### focus

`focus(): void`

Manual focus to the input box

### select

`select(): void`

Select all text in input

`select(selectionStart?: number, selectionEnd?: number): void`

Select the content between selectionStart and selectionEnd

<style>
.zent-input-wrapper {
    width: 240px;
    margin-bottom: 20px;
}
</style>