OTP
import { Input } from "zmp-ui";
const { OTP } = Input;
Dùng để nhập mã OTP.
Ví dụ
Bảng thuộc tính
InputProps
| 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') |
OTPProps
| Property | Type | Required | Description |
|---|---|---|---|
| value | string | No | Giá trị của OTP. Cần được sử dụng cùng với `onChange` để cập nhật lại giá trị. |
| defaultValue | string | No | Giá trị mặc định của OTP. Thay đổi giá trị của `defaultValue` khi component đã được render sẽ không có tác dụng. |
| otpLength | number | No | Độ dài của OTP, cũng đồng thời là số lượng ô nhập mã OTP. Mặc định là 4 ô. (default: 4) |
| show | boolean | No | Hiển thị hoặc che đi mã OTP được nhập. Mặc định, mã OTP sẽ được hiển thị dưới dạng các dấu hoa thị (*). (default: false) |