Input OTP

Forms

Component nhập mã OTP với nhiều variant, kích thước, hình dạng, separator và mask.

Variants

Outline (default)

Filled

Underline

Glass

Square (default)

Rounded

Circle

Dash after index 2

Dot every 2 slots

Space every 3 slots

Demo: nhập 123456 để xác thực thành công.

Nhập mã xác thực (thử: 123456)

Mã 6 chữ số đã gửi đến email của bạn.

Prop	Type	Default	Mô tả
`length`	`number`	`6`	Số ô OTP
`variant`	`"outline" \| "filled" \| "underline" \| "glass"`	`"outline"`	Kiểu hiển thị
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Kích thước ô
`shape`	`"square" \| "rounded" \| "circle"`	`"square"`	Hình dạng ô
`inputMode`	`"numeric" \| "alpha" \| "alphanumeric"`	`"numeric"`	Loại ký tự nhập
`mask`	`boolean \| string`	—	Ẩn giá trị nhập (dạng password)
`separator`	`"dash" \| "dot" \| "space" \| ReactNode`	—	Ký tự phân cách
`separatorAfter`	`number \| number[]`	—	Vị trí đặt separator