ورودی (Input)
کامپوننت ورودی، یک فیلد را مشخص میکند که کاربر میتواند داده وارد کند.
پایه (Basic)
سادهترین استفاده از ورودی.
اندازهها (Sizes)
سه گزینه برای اندازه فیلد ورودی وجود دارد.
غیرفعال (Disabled)
ورودی غیرفعال.
پیشوند/پسوند (Affix)
ورودی میتواند محتوای
suffix یا prefix داخل خود داشته باشد.تومان
رمز قابل مشاهده (Password Visible)
نمونهای از کنترل نوع ورودی از طریق آیکون پیشوند.
متن چندخطی (Textarea)
تبدیل فیلد ورودی به متن چندخطی با تنظیم
textarea به true.نامعتبر (Invalid)
نمایش ورودی بهعنوان وضعیت نامعتبر زمانی که
invalid روی true تنظیم شده است.ورودی کنترلشده (Controlled Input)
نمونهای از ورودی کنترلشده.
API
ورودی (Input)
| ویژگی | توضیحات | نوع | پیشفرض |
|---|---|---|---|
| disabled | آیا ورودی غیرفعال است | boolean | - |
| invalid | آیا ورودی وضعیت نامعتبر دارد | boolean | - |
| onBlur | زمانی که ورودی فوکوس را از دست میدهد، فراخوانی میشود | (e: MouseEvent) => void | - |
| onChange | زمانی که مقدار ورودی تغییر میکند، فراخوانی میشود | (e: MouseEvent) => void | - |
| onFocus | زمانی که ورودی فوکوس میشود، فراخوانی میشود | (e: MouseEvent) => void | - |
| prefix | نمایش محتوای پیشوند داخل ورودی | string | ReactNode | - |
| size | اندازه ورودی | 'lg' | 'md' | 'sm' | 'md' |
| suffix | نمایش محتوای پسوند داخل ورودی | string | ReactNode | - |
| textArea | آیا ورودی به فیلد متن چندخطی تبدیل شود | boolean | - |
| type | نوع ورودی، برای انواع موجود به MDN مراجعه کنید | string | 'text' |
| unstyle | آیا استایل پیشفرض ورودی حذف شود | boolean | false |