PasswordField
فیلد رمز عبور روی TextField سوار است و سه چیز اختیاری به آن اضافه میکند: دکمهٔ نمایش/پنهانکردن، نوار قدرت، و چکلیست شرطها. هر سه جدا از هم روشن و خاموش میشوند، چون فرم ورود فقط دکمهٔ نمایش را میخواهد و فرم ثبتنام معمولاً هر سه را.
این کامپوننت فعلاً برای ۱ فریمورک از ۴ فریمورک آماده است.
- حداقل ۸ نویسه
- هم حرف کوچک و هم بزرگ لاتین (a-z و A-Z)
- حداقل یک رقم (۰-۹) یا نماد
- از رمزهای رایج نباشد
این نمونه هنوز برای Vue پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
نصب
با CLI اختصاصی dig-ui کامپوننت را از رجیستری دیگ نصب کنید؛ وابستگیها و فایلها خودکار اضافه میشوند.
pnpm dlx dig-ui@latest add https://design-system-tau-green.vercel.app/r/password-field.jsonnpx dig-ui@latest add https://design-system-tau-green.vercel.app/r/password-field.jsonyarn dlx dig-ui@latest add https://design-system-tau-green.vercel.app/r/password-field.jsonbunx --bun dig-ui@latest add https://design-system-tau-green.vercel.app/r/password-field.jsonاین کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Reka UI در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Bits UI در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Angular CDK در دست کار است.
استفاده
import { PasswordField } from "@/components/ui/password-field"
// فرم ورود: فقط دکمهٔ نمایش
<PasswordField label="رمز عبور" />
// فرم ثبتنام: نوار قدرت و چکلیست
<PasswordField label="رمز عبور" strength requirements />این کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Reka UI در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Bits UI در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Angular CDK در دست کار است.
ترکیب اجزا
امتیاز قدرت از همان قوانینی میآید که در چکلیست به کاربر نشان داده میشود، نه از یک فرمول جداگانه؛ پس چیزی که کاربر میبیند دقیقاً همان چیزی است که نمرهاش را ساخته و «چرا ضعیف است؟» جواب روشن دارد. نوار قدرت هم بهتعداد همان قوانین بخش دارد.
این سنجش فقط راهنمای بصری است؛ تصمیم «این رمز قبول است یا نه» را همچنان سرور میگیرد و برای همین PasswordField خودش هیچوقت فیلد را نامعتبر نمیکند. اگر میخواهید، مثل نمونهٔ Score Gate با passwordScore خودتان invalid را بدهید.
فعلاً فقط برای ریاکت پورت شده است.
دسترسپذیری
- دکمهٔ نمایش رمز aria-label و aria-pressed دارد، پس صفحهخوان هم عنوان و هم وضعیت فعلی را میگوید.
- نوار قدرت role="meter" با aria-valuenow و aria-valuetext است، پس صفحهخوان بهجای «۳ نوار رنگی» میگوید «خوب».
- چکلیست یک فهرست واقعی (ul/li) است و هر شرط علاوه بر رنگ، آیکون تیک یا ضربدر دارد، یعنی تنها با رنگ منتقل نمیشود.
- دکمهٔ نمایش رمزِ خود مرورگر (اج) پنهان میشود تا دو دکمهٔ همکار کنار هم نباشد.
- برای فرم ثبتنام autoComplete="new-password" و برای ورود autoComplete="current-password" بدهید تا مدیر رمز درست رفتار کند.
مرجع API
PasswordField
هر propای که اینجا نیست به TextField و از آنجا به Input میرسد: label، description، errorMessage، invalid، required، disabled، size، variant، color و…
| ویژگی | نوع | پیشفرض | توضیح |
|---|---|---|---|
| revealToggle | boolean | true | دکمهٔ نمایش/پنهانکردن رمز در انتهای فیلد؛ aria-pressed دارد. |
| strength | boolean | false | نوار قدرت زیر فیلد، با یک بخش بهازای هر شرط و برچسب متنی. |
| requirements | boolean | PasswordRule[] | false | چکلیست شرطها. true یعنی قوانین پیشفرض؛ یا فهرست خودتان را بدهید تا هم چکلیست و هم نوار قدرت بر همان مبنا کار کنند. |
| onScoreChange | (score: number) => void | — | هر بار که امتیاز (۰ تا تعداد قوانین) عوض میشود صدا زده میشود. |
| revealLabel / hideLabel | string | "نمایش رمز" / "پنهانکردن رمز" | aria-label دکمهٔ نمایش در دو حالت. |
| value / defaultValue / onValueChange | string / string / (value: string) => void | — | هر دو حالت controlled و uncontrolled کار میکنند؛ نوار قدرت و چکلیست در هر دو حالت درستاند. |
| className | string | — | کلاس ظرفی که فیلد، نوار قدرت و چکلیست را دارد. |
PasswordRule
| ویژگی | نوع | پیشفرض | توضیح |
|---|---|---|---|
| id | string | — | شناسهٔ یکتا برای key در فهرست. |
| label | string | — | متنی که در چکلیست به کاربر نشان داده میشود. |
| test | (value: string) => boolean | — | شرط؛ true یعنی برآورده شده. |
passwordScore
همان تابعی که خود کامپوننت استفاده میکند، برای وقتی که میخواهید بیرون از فیلد تصمیم بگیرید.
| ویژگی | نوع | پیشفرض | توضیح |
|---|---|---|---|
| passwordScore(value, rules?) | (value: string, rules?: PasswordRule[]) => number | — | تعداد شرطهای برآوردهشده. با قوانین پیشفرض عددی بین ۰ تا ۴. |
| defaultPasswordRules | PasswordRule[] | — | چهار قانون پیشفرض: طول، حروف کوچک و بزرگ، رقم یا نماد، و رایجنبودن. |
Data Attributes
| ویژگی | نوع | پیشفرض | توضیح |
|---|---|---|---|
| data-slot | "password-strength" | "password-requirements" | — | نوار قدرت و فهرست شرطها؛ خود فیلد همان اسلاتهای TextField و Input را دارد. |
| data-passed | "true" | "false" | — | روی هر li از چکلیست، برای استایلدهی از بیرون. |
این کامپوننت هنوز برای Vue پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Reka UI در دست کار است.
این کامپوننت هنوز برای Svelte پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Bits UI در دست کار است.
این کامپوننت هنوز برای Angular پورت نشده است.
نسخهٔ ریاکت آماده است؛ پورت این فریمورک روی Angular CDK در دست کار است.
نمونهها
Reveal Toggle
دکمهٔ نمایش/پنهانکردن پیشفرض روشن است. برای فرم ورود معمولاً همین کافی است.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
Strength Meter
با strength یک نوار چهاربخشی زیر فیلد میآید که با هر شرطِ برآوردهشده یک بخش پر میشود: بسیار ضعیف، ضعیف، متوسط، خوب، عالی.
ضعیف
خوب
عالی
این نمونه هنوز برای Vue پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
Requirements
با requirements چکلیست شرطها زیر فیلد میآید و هر شرط بهمحض برآوردهشدن تیک میخورد. تایپ کنید تا تیکها را ببینید.
- حداقل ۸ نویسه
- هم حرف کوچک و هم بزرگ لاتین (a-z و A-Z)
- حداقل یک رقم (۰-۹) یا نماد
- از رمزهای رایج نباشد
این نمونه هنوز برای Vue پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
Custom Rules
بهجای true میتوانید فهرست شرطهای خودتان را بدهید؛ نوار قدرت هم خودکار بهتعداد همان شرطها بخش میگیرد.
- حداقل ۱۲ نویسه
- حداقل یک نماد (!@#$…)
- شامل نام سازمان نباشد
این نمونه هنوز برای Vue پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
Score Gate
PasswordField خودش هیچوقت فیلد را نامعتبر نمیکند. اگر میخواهید رمز ضعیف را رد کنید، با passwordScore امتیاز را بگیرید و خودتان invalid بدهید.
امتیاز فعلی را زیر فیلد میبینید.
امتیاز: ۰ از ۴ — هنوز کافی نیست
این نمونه هنوز برای Vue پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
Confirm Password
الگوی رایج ثبتنام: رمز و تکرار آن.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
Disabled and Read-only
این نمونه هنوز برای Vue پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
در حال ورود (Loading)
فیلد و دکمه باید با هم قفل شوند. اگر فقط دکمه غیرفعال شود، کاربر میتواند گذرواژه را وسط کار عوض کند و بعد نتیجهٔ درخواستِ قبلی برسد.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
ورود در برابر ثبتنام (Empty)
در فرم ورود، سنجهٔ قدرت و فهرست قواعد بیمورد است و فقط سروصداست؛ گذرواژه از قبل ساخته شده. اینها فقط جایی میآیند که کاربر دارد گذرواژه میسازد.
فرم ورود: بدون سنجه، چون گذرواژه از قبل ساخته شده
- حداقل ۸ نویسه
- هم حرف کوچک و هم بزرگ لاتین (a-z و A-Z)
- حداقل یک رقم (۰-۹) یا نماد
- از رمزهای رایج نباشد
فرم ثبتنام: سنجه و قواعد از همان ابتدا دیده میشوند
این نمونه هنوز برای Vue پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
مقدار بلند (Overflow)
مقدار داخل فیلد اسکرول میشود و دکمهٔ نمایش سر جایش میماند. برای گذرواژهٔ لاتین، dir=ltr خوانایی و جای مکاننما را درست میکند.
مقدار داخل فیلد اسکرول میشود و دکمهٔ نمایش سر جایش میماند. برای گذرواژهٔ لاتین، dir=ltr خوانایی را بهتر میکند.
این نمونه هنوز برای Vue پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
پین خانهخانه (PIN)
PasswordField برای رمزهای متنیِ بیطولثابت است؛ برای پینی که هر رقمش یک خانهٔ جدا میخواهد، از InputOTP با type="password" استفاده کنید — همان چیزی که رمز یکبارمصرف پیامکی به کار میبرد، اینبار بدون autoComplete="one-time-code".
این نمونه هنوز برای Vue پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Svelte پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
این نمونه هنوز برای Angular پورت نشده است؛ آنچه میبینید نسخهٔ ریاکت است.
کدام نمونه برای کدام موقعیت
| نمونه | کجا به کار میآید |
|---|---|
| Reveal Toggle | دکمهٔ نمایش/پنهانکردن پیشفرض روشن است |
| Strength Meter | با strength یک نوار چهاربخشی زیر فیلد میآید که با هر شرطِ برآوردهشده یک بخش پر میشود: بسیار ضعیف، ضعیف، متوسط، خوب، عالی. |
| Requirements | با requirements چکلیست شرطها زیر فیلد میآید و هر شرط بهمحض برآوردهشدن تیک میخورد |
| Custom Rules | بهجای true میتوانید فهرست شرطهای خودتان را بدهید؛ نوار قدرت هم خودکار بهتعداد همان شرطها بخش میگیرد. |
| Score Gate | PasswordField خودش هیچوقت فیلد را نامعتبر نمیکند |
| Confirm Password | الگوی رایج ثبتنام: رمز و تکرار آن. |
| Disabled and Read-only | رمز از سرور آمده و در این فرم قابل تغییر نیست |
| در حال ورود (Loading) | فرم ورود، بین زدن دکمه و پاسخ سرور |
| ورود در برابر ثبتنام (Empty) | تفاوت فرم ورود با فرم ساخت گذرواژه |
| مقدار بلند (Overflow) | عبارتهای عبور طولانی که کاربر از مدیر گذرواژه میآورد |
| پین خانهخانه (PIN) | پین کارت بانکی یا کد امنیتی با طول ثابت |
دستورالعمل استفاده
دکمهٔ نمایش رمز را برای رمز تازه پنهان نکنید
انجام بده
در فرم ثبتنام revealToggle را روشن بگذارید (پیشفرض) تا کاربر بتواند رمز تازهای که ساخته را قبل از ارسال بررسی کند.
انجام نده
revealToggle={false} روی فرم ثبتنام یعنی کاربر هیچ راهی برای دیدن رمزی که تایپ کرده ندارد؛ یک غلط تایپی ساده میتواند بعداً او را از حساب بیرون نگه دارد.
نوار قدرت فقط راهنماست؛ رمز ضعیف را خودتان رد کنید
رمز باید دستکم سه شرط از چهار شرط را داشته باشد.
ضعیف
انجام بده
چون PasswordField خودش هیچوقت فیلد را نامعتبر نمیکند، برای جلوگیری از رمز ضعیف باید invalid و errorMessage را خودتان بر اساس امتیاز بدهید.
ضعیف
انجام نده
اگر فقط strength را روشن کنید و به رنگ قرمز نوار بسنده کنید، هیچچیز واقعاً جلوی ارسال فرم با رمز «بسیار ضعیف» را نمیگیرد.
چکلیست شرطها برای ثبتنام، نه برای ورود
- حداقل ۸ نویسه
- هم حرف کوچک و هم بزرگ لاتین (a-z و A-Z)
- حداقل یک رقم (۰-۹) یا نماد
- از رمزهای رایج نباشد
انجام بده
در فرم ثبتنام strength و requirements را با هم روشن کنید تا کاربر همان لحظه بفهمد رمزش چه کم دارد.
- حداقل ۸ نویسه
- هم حرف کوچک و هم بزرگ لاتین (a-z و A-Z)
- حداقل یک رقم (۰-۹) یا نماد
- از رمزهای رایج نباشد
انجام نده
در فرم ورود، جایی که کاربر رمز موجودش را وارد میکند نه رمز تازه میسازد، نمایش چکلیست شرطها بیربط و گیجکننده است؛ همان دکمهٔ نمایش کافی است.