ورودی رمز عبور (PasswordInput)

فیلد رمز عبور با دکمه نمایش/مخفی کردن توکار و جهت پایدار در RTL

منسوخ از 4.3

یک فیلد رمز یک مدل دارد: Input با kind="password" — همان دکمهٔ نمایش رمز و همان جهت پایدار. مسیر مهاجرت: <PasswordInput /> ← <Input kind="password" />، showLabel/hideLabel ← revealLabels={{ show, hide }}. در 5.0 حذف می‌شود.

معرفی

PasswordInput یک Input تخصصی برای دریافت رمز عبور است: به‌صورت پیش‌فرض مقدار را ماسک می‌کند و یک دکمه چشم برای نمایش/مخفی‌کردن موقت مقدار در کنار فیلد قرار می‌دهد. برخلاف ترکیب دستی Input + endAdornment، این کامپوننت جهت (dir) فیلد را همیشه ltr نگه می‌دارد تا هنگام تغییر حالت نمایش، آدورنمنت چشم جابه‌جا نشود — مشکلی که در ترکیب دستی رخ می‌دهد چون Input جهت را فقط برای نوع password به‌طور خودکار روی ltr تنظیم می‌کند و با تغییر نوع به text به جهت صفحه (rtl) برمی‌گردد.

چه زمانی استفاده کنیم:

  • برای هر فیلد ورود/تغییر رمز عبور در فرم‌های ورود، ثبت‌نام یا تنظیمات حساب
  • وقتی کاربر باید بتواند مقدار تایپ‌شده را قبل از ارسال بازبینی کند

چه زمانی استفاده نکنیم:

  • وقتی فرم یک راه دیگر و در دسترس با کیبورد برای نمایش رمز دارد (مثلاً چک‌باکس «نمایش رمز» جدا) — در این حالت enableVisibilityToggle={false} بگذارید تا دکمه تکراری نشود
با دکمهٔ چشم رمز را ببینید؛ جای دکمه با تغییر حالت عوض نمی‌شود.

زمین بازی

با تغییر تنظیمات زیر، پیش‌نمایش زنده را مشاهده کنید.

زمین بازی
تنظیمات
ظاهر
محتوا
حالت
import { PasswordInput } from '@partodata/ui'

<PasswordInput aria-label="رمز عبور" placeholder="رمز عبور خود را وارد کنید" />

استفاده

import { PasswordInput } from '@partodata/ui'

export default function LoginForm() {
  return <PasswordInput placeholder="رمز عبور خود را وارد کنید" />
}

حالت‌ها و انواع

رمز عبور باید دست‌کم 8 نویسه باشد.

بدون دکمه نمایش/مخفی‌کردن

برای فرم‌هایی که یک affordance جداگانه برای نمایش رمز دارند:

<PasswordInput enableVisibilityToggle={false} placeholder="رمز عبور" />

برچسب‌های سفارشی

aria-label دکمه در دو حالت پیش‌فرض «نمایش رمز» و «مخفی کردن رمز» است؛ برای متن اختصاصی:

<PasswordInput showLabel="نمایش رمز عبور" hideLabel="پنهان کردن رمز عبور" />

حالت خطا

<PasswordInput aria-invalid="true" placeholder="رمز عبور" />

غیرفعال

<PasswordInput disabled placeholder="رمز عبور" />

راهنمای استفاده

بکنید

  • همیشه یک Label مرتبط (با htmlFor) در کنار PasswordInput قرار دهید - اجازه دهید دکمه نمایش/مخفی‌کردن در مسیر Tab طبیعی فیلد باقی بماند؛ این دکمه راه اصلی بازبینی مقدار تایپ‌شده برای کاربر کیبورد است - برای فرم تغییر رمز، از دو نمونه جدا (رمز جدید / تکرار رمز) با PasswordInput استفاده کنید

نکنید

  • toggleTabIndex={-1} را صرفاً برای کوتاه‌کردن مسیر Tab نگذارید — این گزینه فقط برای زمانی است که فرم راه دیگری برای نمایش رمز با کیبورد فراهم کرده باشد - برای نمایش یک راز موجود (کلید API، توکن) از PasswordInput استفاده نکنید — از CopyButton کنار متن استفاده کنید - dir را روی rtl override نکنید؛ آدورنمنت چشم برای جهت ltr جای‌گذاری شده است

Props

Prop

Type

دسترسی‌پذیری

  • دکمه نمایش/مخفی‌کردن یک <button type="button"> واقعی با aria-label و aria-pressed است و به‌صورت پیش‌فرض در مسیر Tab قرار دارد — طبق WCAG 2.1.1 نمایش رمز نباید فقط با ماوس ممکن باشد
  • aria-pressed وضعیت فعلی (نمایش/مخفی) را برای صفحه‌خوان اعلام می‌کند و متن aria-label هم‌زمان بین «نمایش رمز» و «مخفی کردن رمز» تغییر می‌کند
  • حلقه focus مرئی روی دکمه با رنگ برند ثابت طراحی شده (نه یک رنگ متغیر با تم)

تعامل با کیبورد

  • Tab: انتقال فوکوس بین فیلد و دکمه نمایش/مخفی‌کردن - Enter / Space: تغییر حالت نمایش رمز وقتی دکمه فوکوس دارد

کامپوننت‌های مرتبط

  • Input — برای فیلدهای متنی عمومی که نیاز به ماسک‌کردن یا دکمه نمایش/مخفی ندارند، از Input استفاده کنید
  • Field — برای ترکیب برچسب، پیام خطا و متن راهنما در کنار PasswordInput

سلول وضعیت (StatusCell)

ستون وضعیت جدول — نقطهٔ رنگیِ معنادار، برچسب متنی و caption؛ با چهار رنگ معنایی، پالس برای «در حال انجام» و StatusDot برای نقطهٔ تنها.

گروه ورودی (InputGroup)

گروه‌بندی input با addon ها و دکمه‌ها

در این صفحه

معرفی
زمین بازی
استفاده
حالت‌ها و انواع
بدون دکمه نمایش/مخفی‌کردن
برچسب‌های سفارشی
حالت خطا
غیرفعال
راهنمای استفاده
Props
دسترسی‌پذیری
کامپوننت‌های مرتبط