ورودی (Input)

معرفی

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

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

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

استفاده

import { Input } from '@partodata/ui'

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

زمین بازی

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

import { Input } from '@partodata/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>

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

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

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