Input
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
- Tiêu chuẩn thiết kế
Ví dụ
Bảng thuộc tính
| Property | Type | Required | Description |
|---|---|---|---|
| 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 | Kích thước của input. Mang một trong các giá trị `small`, `medium` hoặc `large`. (default: 'medium') |
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
- 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
Password Field
Để nhập mật khẩu
Text Area
Để nhập nội dung dài
Search Field
Để nhập nội dung tìm kiếm, trong 1 dòng
Interaction
- Touch vào trigger action nhập text
OTP Field
Dùng để nhập OTP. Highlight từng số khi nhập
States
Enabled
Focus
Activated
Disabled
Không hiển thị:
- Clear icon
- Helper text
- Required label