English
VietnameseTailwind CSS v4 + Ark UI@ark-ui/react/pin-input
Ark Pin Input Component
Thành phần nhập mã số xác thực (PIN / OTP Input) được thiết kế đồng bộ kích thước chuẩn xác (xs, sm, md, lg) với Button và Input. Hỗ trợ tự động chuyển ô, phím Backspace, dán toàn bộ mã (paste), ẩn mật khẩu (mask), chế độ gắn liền (attached), Compound API linh hoạt và tích hợp sẵn với Remix Form.
1. Đồng bộ kích thước chuẩn với Button & Input
Mỗi ô ký tự của ArkPinInput có kích thước cạnh và chiều cao trùng khớp hoàn toàn với Button icon-only và Input cùng size, đảm bảo căn lề baseline và nhịp độ giao diện đồng nhất.
xsExtra Small (xs)
Kích thước ô: 24px (1.5rem)smSmall (sm)
Kích thước ô: 28px (1.75rem)mdMedium (md - mặc định)
Kích thước ô: 34px (2.125rem)lgLarge (lg)
Kích thước ô: 40px (2.5rem)2. Shorthand API & Cấu hình độ dài (Length & Placeholders)
Khởi tạo nhanh chóng bằng cách truyền độ dài length, nhãn label, placeholder tùy chọn mà không cần ghép nối thủ công từng part.
Mã PIN 4 chữ số (Thanh toán / Thẻ)
Nhập 4 chữ số bảo mật thẻ
Mã OTP 6 chữ số (Xác thực 2 bước)
Nhập mã 6 chữ số gửi về điện thoại
3. Chế độ Mask (Ẩn ký tự bảo mật & Icon Toggle)
Khi bật mask={true}, ký tự nhập vào sẽ được ẩn thành dấu chấm mật khẩu bảo vệ sự riêng tư của người dùng, tích hợp sẵn icon toggle chuyển đổi hiển thị/ẩn mã PIN.
Hiển thị mã PIN
Tích hợp sẵn nút toggle con mắt để hiển thị hoặc ẩn các số đã nhập
4. Compound API: Phân nhóm 3-3 & Chế độ Attached
Sử dụng Compound Components (ArkPinInput.Root, Control, Input) để tự do sắp đặt dấu gạch ngang phân tách nhóm ký tự hoặc làm các ô dính liền nhau (attached).
Phân nhóm 3 - 3 với dấu gạch ngang
Dễ đọc hơn khi xác thực qua Authenticator App.
—
Chế độ ô liền kề (attached=)
Các ô ký tự dính liền nhau tạo thành cụm bo góc ngoài thống nhất.
5. Các trạng thái tương tác: Disabled, ReadOnly, Invalid
Đầy đủ phản hồi giao diện khi bị vô hiệu hóa, chỉ đọc hoặc khi dữ liệu nhập không hợp lệ theo chuẩn ARIA.
Disabled (Vô hiệu hóa)
ReadOnly (Chỉ đọc)
Invalid (Báo lỗi viền đỏ)
Mã xác thực không chính xác
6. Trạng thái Controlled & Tương tác Sự kiện
Quản lý giá trị hai chiều (two-way binding), nhận sự kiện thay đổi từng ký tự onValueChange và sự kiện hoàn thành onValueComplete.
value (array): ["1","2","3","4"]
valueAsString: "1234"
isComplete: true (Hoàn tất)
7. Tích hợp chuyên dụng với Remix Hook Form (PinInputField)
Component PinInputField tự động kết nối Controller, hiển thị nhãn Field.Label, mô tả Field.Description, kiểm tra lỗi hợp lệ (numeric, độ dài) và hiển thị Field.Error.