Phiên bản: 1.11.0

OTP

Cập nhật lần cuối: 23/6/2025

import { Input } from "zmp-ui";
const { OTP } = Input;

Dùng để nhập mã OTP.

Ví dụ

Name	Type	Default	Description
size	`InputSize`	`"medium"`	Kích thước của input. Mang một trong các giá trị `small`, `medium` hoặc `large`.
status	`InputStatus`		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`.
type	`InputType`		Loại input.
value	`InputHTMLAttributes["value"]`		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"]`		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.
onPressEnter	`KeyboardEventHandler`		Callback được gọi khi người dùng nhấn Enter hoặc xuống dòng trong input.

Name	Type	Default	Description
defaultValue	`string`		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`	`4`	Độ dài của OTP, cũng đồng thời là số lượng ô nhập mã OTP. Mặc định là 4 ô.
show	`boolean`	`false`	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ị (*).
value	`string`		Giá trị của OTP. Cần được sử dụng cùng với `onChange` để cập nhật lại giá trị.