---
sourceType: official-guide
sourceTypeMatchedRule: fallback
slug: MA/zaui/form/Input
title: Input
---
```ts
import { Input } from "zmp-ui";
```


Dùng để tạo ô nhập liệu cho phép người dùng nhập văn bản và lấy dữ liệu

### Hướng dẫn sử dụng

## Ví dụ



## Bảng thuộc tính


| Tên | Type | Required | Default | Mô tả |
| --- | --- | --- | --- | --- |
| value | InputHTMLAttributes['value'] | No |  | Giá trị của input. Cần được sử dụng cùng với `onChange` để cập nhật lại giá trị. |
| onChange | InputHTMLAttributes['onChange'] | No |  | Callback được gọi khi giá trị của input thay đổi. Cần phải cập nhật lại giá trị của `value` nếu được truyền vào. |
| type | InputType | No |  | Loại input. |
| status | InputStatus | No |  | Trạng thái hợp lệ của input. Nếu là `error`, input sẽ có màu cảnh báo kèm theo `errorText`, ngược lại input sẽ có màu trung hoà kèm theo `helperText`. |
| onPressEnter | KeyboardEventHandler | No |  | Callback được gọi khi người dùng nhấn Enter hoặc xuống dòng trong input. |
| size | InputSize | No | 'medium' | Kích thước của input. Mang một trong các giá trị `small`, `medium` hoặc `large`. |

### Tiêu chuẩn thiết kế

{/* inline-mdx: ../specs/Input.mdx (from .sources/zmp-docs/zaui-react_versioned_docs/version-1.11.0/form/Input.mdx) */}

#### Input Field

Được sử dụng để nhập, gửi dữ liệu, vì vậy phải ngắn gọn và rõ ràng

---

##### Anatomy

###### Core elements (Required)

Luôn xuất hiện trong một input field


![Base Input](/assets/MA/img/zaui/input/core-input.png)


- Background
- Border
- Primary text

---

##### Types

Sử dụng các loại input field khác nhau để đáp ứng nhu cầu nhập nội dung khác nhau

---

###### Text Field

Để nhập nội dung đơn giản, trong 1 dòng


![Text Input](/assets/MA/img/zaui/input/text-field.png)


---

###### Password Field

Để nhập mật khẩu


  ![Password Input](/assets/MA/img/zaui/input/password-field.png)


---

###### Text Area

Để nhập nội dung dài


![Textarea](/assets/MA/img/zaui/input/textarea.png)


---

###### Search Field

Để nhập nội dung tìm kiếm, trong 1 dòng


![Search Input](/assets/MA/img/zaui/input/search.png)


**Interaction**

- Touch vào trigger action nhập text

---

###### OTP Field

Dùng để nhập OTP. Highlight từng số khi nhập


![OTP](/assets/MA/img/zaui/input/otp.png)


---

##### States

###### Enabled


![Enabled](/assets/MA/img/zaui/input/text-enabled.png)


---

###### Focus


![Focus](/assets/MA/img/zaui/input/focus.png)


![Focus Error](/assets/MA/img/zaui/input/focus-error.png)


  ![Focus Success](/assets/MA/img/zaui/input/focus-success.png)


---

###### Activated


![Activated](/assets/MA/img/zaui/input/activated.png)


  ![Activated Error](/assets/MA/img/zaui/input/activated-error.png)


  ![Activated Success](/assets/MA/img/zaui/input/activated-success.png)


---

###### Disabled


![Disabled](/assets/MA/img/zaui/input/disabled.png)


Không hiển thị:

- Clear icon
- Helper text
- Required label
{/* inline-mdx: end ../specs/Input.mdx */}