اینپوت Input

کامپوننت Input به‌طور گسترده برای دریافت داده‌های ورودی از کاربران طراحی شده است. این کامپوننت می‌تواند شامل ویژگی‌های مختلفی از جمله آیکون‌ها، دکمه‌های پیش‌وند و پس‌وند، و قابلیت‌های مختلف مانند حالت‌های مختلف استیت (فعال، غیرفعال، خواندنی فقط و ...) و انواع سایزها برای تطبیق با نیازهای مختلف باشد.

Input برای استفاده در فرم‌ها، جست‌وجوها، فیلترها و هر نوع ورودی کاربر در صفحات طراحی شده است. با قابلیت‌های متنوع، این کامپوننت انعطاف‌پذیری بالایی برای ایجاد انواع ورودی‌ها را فراهم می‌کند. ویژگی‌هایی همچون پیشوند (prefix)، پسوند (suffix) و آیکون داخلی آن، به ایجاد ورودی‌های خاص و تعامل با کاربر کمک می‌کند.

نمونه زنده

mdSelect option

defaultSelect option

بدون آرایهSelect option

انواع

Variant	کاربرد
Default	حالت پیش‌فرض ورودی برای دریافت داده از کاربر، بدون خطا یا وضعیت خاص. مناسب تعاملات عمومی با فرم‌ها.
Hover	زمانی که کاربر روی ورودی قرار می‌گیرد؛ نشان‌دهنده قابل کلیک یا قابل تمرکز بودن آن.
Focus	زمانی که ورودی در حالت تمرکز قرار می‌گیرد و آماده دریافت داده است؛ با یک خط برجسته دور ورودی همراه است.
Press	زمانی که ورودی در هنگام فشار توسط کاربر در نظر گرفته می‌شود؛ مناسب ورودی‌هایی مانند جعبه‌های متنی قابل تغییر.
Disable	ورودی غیرفعال است و نمی‌توان داده‌ای در آن وارد کرد. ورودی در این حالت خاکستری می‌شود.
Read-only	ورودی تنها برای مشاهده است و کاربر نمی‌تواند در آن تغییری ایجاد کند؛ مناسب نمایش داده‌های غیرقابل ویرایش.

آناتومی

1. Base (ورودی): اصلی‌ترین قسمت ورودی است که کاربر داده‌ها را در آن وارد می‌کند. تمام ویژگی‌های اصلی و تغییرات بصری مانند رنگ، حالت‌های فعال/غیرفعال و وضعیت خطا در این بخش اعمال می‌شود.
2. Placeholder (متن پیش‌فرض): متنی است که به‌صورت پیش‌فرض داخل ورودی نمایش داده می‌شود و به کاربر کمک می‌کند نوع داده‌ای که باید وارد کند را بفهمد. به محض شروع تایپ، این متن از بین می‌رود.
3. Prefix (پیشوند): پیشوندی که قبل از ورودی قرار می‌گیرد. برای افزودن اطلاعات تکمیلی یا مشخص کردن نوع ورودی استفاده می‌شود (برای مثال https:// در یک ورودی URL).
4. Suffix (پسوند): پسوندی که در انتهای ورودی قرار می‌گیرد. برای اطلاعات یا کنترل‌های اضافی استفاده می‌شود (برای مثال کد کشور در شماره تلفن).
5. آیکون (Icon): آیکونی که در ابتدای ورودی، پس از پیشوند قرار می‌گیرد. می‌تواند نمایانگر نوع داده ورودی باشد (مانند آیکون جست‌وجو برای ورودی‌های جست‌وجو).
6. آیکون باتن (Icon Button): آیکون باتنی در انتهای ورودی برای انجام عملیاتی مانند نمایش/مخفی کردن پسورد، ارسال داده یا هر تعامل سریع دیگر با ورودی.

ساختار

متوسط

موضوع	مقدار
سایز آیکون	24px
سایز آیکون باتن	32px
ارتفاع متن placeholder	20px
پدینگ افقی prefix	12px
پدینگ عمودی prefix	8px
پدینگ افقی suffix	12px
پدینگ عمودی suffix	8px

اندازه

کامپوننت Input در سه سایز مختلف قابل استفاده است که بسته به نیاز و موقعیت در طراحی، می‌توان از هر کدام بهره برد:

سایز	ارتفاع	کاربرد
Small	32px	برای فرم‌ها یا فیلدهای ورودی که به فضای کمی نیاز دارند و باید اطلاعات را به‌شکل سریع و ساده از کاربر دریافت کنند. مناسب صفحاتی که تعداد فیلد زیاد است یا عرض محدودی دارند.
Medium	40px	حالت پیش‌فرض و انتخاب مناسب در بیشتر فرم‌ها؛ زمانی که فضای کافی برای تعامل وجود دارد و ورودی باید واضح و خوانا باشد.
Large	48px	برای ورودی‌هایی که نیاز به تعامل زیاد دارند، در صفحات مهم یا فرم‌هایی با وضوح بالا. به‌ویژه برای موبایل و رابط‌های لمسی ایده‌آل است.

چیدمان

• همیشه Input را داخل Field قرار دهید تا برچسب، راهنما و پیام خطا به‌صورت یکپارچه مدیریت شوند.
• عرض ورودی را متناسب با ماهیت داده تنظیم کنید؛ فیلد کد پستی نباید به اندازه فیلد آدرس عریض باشد.
• در فرم‌های ستونی، عرض همه فیلدها را یکدست نگه دارید تا ریتم بصری حفظ شود.

هم‌ترازی

ورودی‌ها می‌توانند به‌صورت عمودی یا افقی کنار یکدیگر قرار گیرند:

چیدمان	فاصله بین ورودی‌ها	کاربرد
عمودی	24px	زمانی که چندین ورودی در یک فرم یا بخش مشابه قرار دارند.
افقی	16px	زمانی که نیاز به استفاده بهینه از فضای صفحه است و ورودی‌ها کنار هم قرار می‌گیرند.

این چیدمان‌ها باعث می‌شود ورودی‌ها به‌طور مرتب و قابل فهم نمایش داده شوند و استفاده از آن‌ها آسان‌تر باشد.

سلسله‌مراتب

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

• دریافت متون کوتاه و تک‌خطی (نام، ایمیل، آدرس).
• دریافت مقادیر عددی همراه با پسوند واحد (مثل ریال یا گیگابایت).
• اعمال جست‌وجو یا فیلتر سریع روی داده‌ها.

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

• برای متن‌های طولانی چندخطی، به جای Input از Text Area استفاده کنید.
• برای انتخاب یکی از چند گزینه از پیش تعریف‌شده، از Dropdown یا Radio Group استفاده کنید.
• برای انتخاب مقدار از یک بازه عددی پیوسته، از Slider استفاده کنید.

نوشتار

در طراحی نوشتار برای ورودی‌ها، باید به وضوح و سادگی توجه داشت تا کاربران به راحتی متوجه شوند چه نوع داده‌ای باید وارد کنند و چگونه با ورودی تعامل داشته باشند.

متن جایگزین

• باید کوتاه و راهنما باشد، نه جایگزین برچسب (Label).
• در حد امکان یک مثال واقعی از مقدار مورد انتظار ارایه دهید (مثلاً example@arvan.cloud).
• از تکرار متن برچسب در Placeholder خودداری کنید.

پیام خطا

• خطا را به‌طور مشخص و راه‌حل‌محور بنویسید (مثال: «ایمیل وارد شده معتبر نیست»).
• از عبارات مبهم مانند «خطایی رخ داده است» پرهیز کنید.

پسوند و پیشوند

• پسوند و پیشوند باید کوتاه باشند (تا ۵ کاراکتر یا یک کلمه).
• از قرار دادن عبارت‌های توضیحی طولانی در پسوند و پیشوند خودداری کنید.

بایدها

• برچسب‌ها کوتاه و واضح باشند: برچسب‌ها باید کوتاه (زیر ۳ کلمه) و دقیق باشند تا مفهوم ورودی به وضوح منتقل شود. برای مثال، برای ورودی ایمیل از «ایمیل» استفاده کنید، نه عبارت‌هایی مانند «آیا می‌خواهید ایمیل خود را وارد کنید؟».
• در صورت نیاز به توضیح بیشتر، از Placeholder استفاده کنید: Placeholder باید مختصر و واضح اطلاعات بیشتری به کاربر بدهد. برای مثال در ورودی تلفن، از +98 912 345 6789 استفاده کنید.
• راهنمایی برای انواع ورودی‌ها: اگر نوع داده خاص است (مثلاً تاریخ یا شماره تلفن)، فرمت ورودی را در Placeholder بگنجانید.
• در صورت نیاز به متن چندخطی، از Text Area استفاده کنید: Input برای داده‌های تک‌خطی است؛ اگر کاربر نیاز به وارد کردن متن طولانی دارد، از Text Area استفاده کنید.
• گفت‌وگو با کاربر به‌طور مستقیم و دوستانه: از زبان ساده و دوستانه استفاده کنید. به جای «لطفاً اطلاعات خود را وارد کنید»، بنویسید «ایمیل خود را وارد کنید».

نبایدها

• چندخطی شدن ورودی: ورودی‌ها نباید شامل متن طولانی یا چندخطی باشند. اگر بیش از یک خط لازم است، از Text Area استفاده کنید.
• استفاده از سوالات مبهم: سوالاتی مانند «آیا مطمئن هستید؟» یا «آیا می‌خواهید این کار را انجام دهید؟» را داخل ورودی نگذارید. ورودی باید بدون سوال‌های اضافی، هدف خود را منتقل کند.
• متن طولانی و پیچیده: از متون طولانی یا پیچیده که موجب سردرگمی می‌شوند پرهیز کنید. ورودی‌ها باید ساده، مستقیم و قابل‌فهم باشند.
• عدم هماهنگی در نوشتار: اگر چند ورودی با هم استفاده می‌شوند، از نوشتار یک‌دست و هماهنگ برای برچسب‌ها استفاده کنید. مثلاً اگر یکی از برچسب‌ها «ایمیل» است، بقیه نیز باید از ساختار مشابهی پیروی کنند.