Yugen UI

PasswordInput

PasswordInput là ô nhập mật khẩu có nút hiện / ẩn, nhắc Caps Lock và thước đo độ mạnh tuỳ chọn.

Input với type="password" và nút hiện / ẩn (nút bật tắt, aria-pressed; bấm chuột không làm mất focus khỏi ô nhập). Khi Caps Lock bật lúc gõ, một dòng nhắc hiện dưới ô và được đọc qua vùng live. strength thêm thước đo bốn nấc (Yếu, Trung bình, Khá, Mạnh) có chữ đi kèm, không chỉ dựa vào màu; getPasswordStrength chấm theo độ dài và số loại ký tự, hoặc truyền hàm chấm điểm riêng. Nhận mọi prop của Input và dùng được trong <Field>; chuỗi có sẵn đổi qua messages.passwordInput.

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 { PasswordInput, getPasswordStrength, type PasswordStrength } 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.

Từ 12 ký tự, có chữ số và ký hiệu

Thước đo độ mạnh

strength dùng getPasswordStrength; mức độ được đọc khi đổi nấc.

Hàm chấm điểm riêng

Trả về 0–4 theo quy tắc của bạn; capsLockWarning={false} tắt dòng nhắc Caps Lock.

Kích thước, appearance & disabled

Như Input; defaultVisible hiện mật khẩu ngay từ đầu.

Cách dùng

Nên
  • Đặt autoComplete đúng: "current-password" khi đăng nhập, "new-password" khi tạo mật khẩu, để trình quản lý mật khẩu điền và gợi ý được.
  • Ghi yêu cầu mật khẩu trong hint của Field, trước khi người dùng gõ.
  • Kiểm tra độ mạnh thật ở server; thước đo chỉ là gợi ý nhanh.
Không nên
  • Không chặn dán vào ô mật khẩu — người dùng trình quản lý mật khẩu cần dán.
  • Không chỉ dựa vào màu của thước đo; giữ chữ mô tả mức độ.

Props

Prop · KiểuMặc địnhMô tả
visible / defaultVisiblebooleanMặc định: falseĐang hiện mật khẩu dạng chữ (controlled / uncontrolled).
onVisibleChange(visible: boolean) => voidMặc định: —Gọi khi bấm nút hiện / ẩn.
capsLockWarningbooleanMặc định: trueNhắc khi Caps Lock bật lúc gõ.
strengthboolean | (password: string) => PasswordStrengthMặc định: —Thước đo độ mạnh: true dùng getPasswordStrength, hoặc hàm trả 0–4.
getPasswordStrength(password: string) => PasswordStrengthMặc định: —0 trống · 1 yếu · 2 trung bình · 3 khá · 4 mạnh, theo độ dài và số loại ký tự.
value / defaultValue / onChange—Mặc định: —Như Input.
label / hint / validationState / validationMessage—Mặc định: —Như Input; hoặc bọc trong <Field>.
size / appearance / contentBefore / contentAfter—Mặc định: —Như Input; contentAfter nằm sau nút hiện / ẩn.
rootClassNamestringMặc định: —Class cho khung ngoài (ô nhập, thước đo, dòng nhắc).
refRef<HTMLInputElement>Mặc định: —Trỏ tới thẻ <input>.

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.passwordInput

Khoá · KiểuMặc định (tiếng Anh)messagesVi
showstring

aria-label nút hiện / ẩn mật khẩu (nút bật tắt, aria-pressed cho biết đang hiện).

Mặc định (tiếng Anh)"Show password"messagesVi"Hiện mật khẩu"
capsLockstring

Nhắc khi Caps Lock đang bật lúc gõ.

Mặc định (tiếng Anh)"Caps Lock is on"messagesVi"Caps Lock đang bật"
strengthstring

Nhãn của thước đo độ mạnh.

Mặc định (tiếng Anh)"Strength"messagesVi"Độ mạnh"
weakstring

Bốn mức của getPasswordStrength (1 → 4).

Mặc định (tiếng Anh)"Weak"messagesVi"Yếu"
fairstringMặc định (tiếng Anh)"Fair"messagesVi"Trung bình"
goodstringMặc định (tiếng Anh)"Good"messagesVi"Khá"
strongstringMặc định (tiếng Anh)"Strong"messagesVi"Mạnh"