You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

47 lines
2.0 KiB

---
category: Components
type: Data Entry
title: Input
---
A basic widget for getting the user input is a text field.
Keyboard and mouse can be used for providing or changing data.
8 years ago
## When To Use
- A user input in a form field is needed.
- A search input is required.
## API
### Input
| Property | Description | Type | Available Values | Default |
|----------------|-----------------------|----------|------------------|---------------|
| type | The type of input. For a multi-line input, the 'textarea' value can be used. | string | 'text' or 'textarea' | 'text' |
| id | The identifier. | number or string | | |
| value | The content value. | any | | |
| defaultValue | The initial value. | any | | |
| size | The size of the input box. The implicit value is 'default'. Note: in the context of a form, the 'large' size is used. | string | {'large','default','small'} | 'default' |
| disabled | Tell if the input is disabled. | bool | | false |
| addonBefore | The label text displayed before (on the left side of) the input field. | node | | |
| addonAfter | The label text displayed after (on the right side of) the input field. | node | | |
| onPressEnter | The callback function that is triggered when pressing Enter key. | function(e) | | |
| autosize | Height autosize feature, available when type="textarea". | bool or object | `true` or `{ minRows: 2, maxRows: 6 }` | false |
> When `Input` is used in a `Form.Item` context, if the `Form.Item` has the `id` and `options` props defined
then `value`, `defaultValue`, and `id` props are automatically set.
#### Input.Group
| Property | Description | Type | Available Values | Default |
|-----------|----------------------------------|--------|-----------------------------|-----------|
| size | The size of `Input.Group` specifies the size of the included `Input` fields. | string | {'large','default','small'} | 'default' |
```html
<Input.Group className={string}>
<Input />
<Input />
</Input.Group>
```