OtpSlots

Playground

Gõ hoặc dán. Chỉ chữ số được giữ. Bật lỗi để xem ring đỏ trên từng ngăn.

Bài toán

Sáu ô input riêng làm tự điền SMS và trình đọc màn hình phải nhảy tiêu điểm. OtpSlots vẽ sáu ngăn và giữ một input. OtpInput vẫn là một ô nhìn thấy được.

Khi nào sử dụng

Nên dùng

• Mã xác thực chỉ gồm chữ số, khi từng số cần một ngăn.
• Nhóm ba và ba, với vạch ngăn ở giữa.

Khi nào không dùng

Tránh dùng

• Một ô nhìn thấy được. Dùng OtpInput.
• Mã có chữ cái, mật khẩu, hoặc khoá hồi phục.

States

Ngăn đang nhận chữ đổi viền và thêm ring 50%. Lỗi đổi viền và ring 20% trên mọi ngăn.

Bàn phím & trợ năng

• Tab vào một trường. Nhãn trỏ tới input ẩn.
• Gõ, Backspace và dán. Chuỗi dán chỉ giữ chữ số.
• Vạch giữa là separator trang trí. Câu lỗi là role="alert" do host viết.

API & triển khai

Design tokens

Viền --nf-component-field-border, resolve về --nf-semantic-border-control. Bóng --nf-component-field-shadow. Ring dùng --nf-component-focus-width và 50% --nf-component-focus-color, cùng thời lượng với Input.

Do / Don't