Yugen UI

InputOTP

InputOTP nhập mã xác thực một lần, mỗi ký tự một ô.

Gõ tự nhảy sang ô kế tiếp, Backspace lùi về ô trước, dán (Ctrl+V) điền toàn bộ mã, onComplete chạy khi đủ ký tự. Ô dùng chung style với Input của Fluent; ô đầu có autocomplete="one-time-code" để trình duyệt tự điền mã SMS.

Import

Cài từ npm, chép mã nguồn vào dự án bằng @yugen-ui/cli hoặc shadcn CLI, hoặc import thẳng khi làm việc trong repo này.

TSX
// npm install yugen-uiimport { InputOTP } from "yugen-ui";

Biến thể

Mỗi ô là một mẫu độc lập: hover để Copy, hoặc bấm Code để xem mã nguồn.

Nhập đủ 6 số

onComplete

Gọi khi người dùng nhập đủ 6 số.

Chữ và số

pattern="alphanumeric", length={4}.

Mã không đúng, vui lòng thử lại.

Trong Field, báo lỗi

Field gắn label vào ô đầu và truyền aria-invalid cho mọi ô.

Kích thước & disabled

small (32px) và disabled. medium (40px) là mặc định; large (48px) ở ví dụ Chữ và số.

Cách dùng

Nên
  • Cho biết mã được gửi tới đâu (“Mã đã gửi tới 09xx xxx 678”).
  • Tự động xác thực khi đủ ký tự qua onComplete thay vì bắt bấm nút.
  • Chia nhóm (groups) cho mã dài để dễ đọc và đối chiếu.
Không nên
  • Không dùng InputOTP cho mật khẩu hay dữ liệu dài — dùng Input.
  • Không xoá toàn bộ mã khi sai một ký tự; để người dùng sửa từng ô.

Props

Prop · KiểuMặc địnhMô tả
lengthnumberMặc định: 6Số ô.
value / defaultValuestringMặc định: —Mã hiện tại.
onValueChange(value: string) => voidMặc định: —Gọi mỗi khi mã đổi.
onComplete(code: string) => voidMặc định: —Gọi khi đủ length ký tự.
pattern"digits" | "alphanumeric" | RegExpMặc định: "digits"Ký tự hợp lệ.
groups / separatornumber[] / ReactNodeMặc định: —Chia nhóm ô và phần tử ngăn cách.
size"small" | "medium" | "large"Mặc định: "medium"Ô 32 / 40 / 48px.
disabled, name, autoFocus—Mặc định: —name tạo input ẩn chứa mã khi submit form.

Messages

Chữ có sẵn của component: nhãn, aria-label, thông báo cho trình đọc màn hình.

Mặc định là tiếng Anh. Đổi qua prop messages của YugenProvider, theo namespace bên dưới; messagesVi chứa bản tiếng Việt. Xem Ngôn ngữ giao diện.

messages.inputOTP

Khoá · KiểuMặc định (tiếng Anh)messagesVi
slot(position: number, length: number) => string

aria-label của từng ô; position đếm từ 1.

Mặc định (tiếng Anh)(position, length) => `Character ${position} of ${length}`messagesVi(position, length) => `Ký tự ${position} trên ${length}`