ورودی (Input)

معرفی

کامپوننت ورودی برای دریافت داده‌های مختلف از کاربر استفاده می‌شود.

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

• برای متن چند خطی — از Textarea استفاده کنید
• برای انتخاب از لیست — از Select یا Autocomplete استفاده کنید
• برای جستجو با قابلیت autocomplete — از SearchInput استفاده کنید

استفاده

import { Input } from '@parto-system-design/ui'

<Input placeholder="نام خود را وارد کنید" />

زمین بازی

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

import { Input } from '@parto-system-design/ui'

<Input />

اندازه‌ها

کامپوننت Input از پنج اندازه استاندارد پشتیبانی می‌کند. اندازه پیش‌فرض sm است.

<Input size="xs" placeholder="اندازه xs" />
<Input size="sm" placeholder="اندازه sm (پیش‌فرض)" />
<Input size="md" placeholder="اندازه md" />
<Input size="lg" placeholder="اندازه lg" />
<Input size="xl" placeholder="اندازه xl" />

انواع

متن

ایمیل

رمز عبور

غیرفعال

با برچسب

Props

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

برای فرم‌های معتبرسنجی، از aria-invalid و aria-describedby استفاده کنید تا خطاها برای کاربران صفحه‌خوان قابل درک باشند:

<div>
  <Input aria-invalid="true" aria-describedby="email-error" value="invalid@" />
  <p id="email-error" className="text-destructive text-sm mt-1">
    آدرس ایمیل معتبر نیست
  </p>
</div>

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

نکات

• از type مناسب برای هر ورودی استفاده کنید
• همیشه label یا aria-label داشته باشید
• پیام‌های خطا را واضح نمایش دهید
• از placeholder به عنوان مثال استفاده کنید، نه توضیحات اصلی
• اندازه small برای اکثر موارد مناسب است

مرتبط

• Textarea — برای ورودی متن چندخطی
• Select — برای انتخاب از بین گزینه‌های از پیش‌تعریف‌شده
• Autocomplete — Input با قابلیت جستجو و پیشنهاد خودکار
• Form — مدیریت اعتبارسنجی و label برای Input

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

• Textarea — برای ورودی چند خطی
• SearchInput — برای جستجو با آیکون و clear button
• InputWithIcon — برای Input با آیکون پیشوند/پسوند
• راهنمای انتخاب کامپوننت — مقایسه همه ورودی‌ها