لوگوی توپُر دیزاین سیستم سنّت

فیلد متنی

فیلد‌های متنی توپُر (Filled) و توخالی (Outlined)

در فیلد متنی کاربر می‌تواند متنی تک‌خطی شامل حرف، عدد یا نشانه را وارد یا ویرایش کند.

دموی تعاملی

پیش‌نمایش کامپوننت که انواع آن‌ها و تفاوت‌های نمایشی و تعاملی هر کدام را نشان می‌دهد.

گزینه‌ها
استایل‌ها
وضعیت‌ها

کاربرد

فیلد متنی معمولاً در فرم‌ها و دیالوگ‌ها استفاده می‌شود و برای ورود اطلاعات یا داده‌های کوتاه مناسب است. برای وارد کردن داده‌ها یا اطلاعاتی که طول بلندتری دارند،‌ باید از «کادر متنی» استفاده شود.

لیبل

متن شبح (Placeholder)

متن ورودی

متن راهنما

فیلد متنی با آیکون

کاراکتر شمار

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

انواع

هر دو نوع از فیلدهای متنی تقریباً عملکرد مشابهی دارند. در انتخاب نوع فیلد متنی به استایل بصری رابط کاربر توجه کنید و دقت کنید فیلد متنی از باقی کامپوننت‌های موجود در محتوا متمایز باشد.

فیلد متنی توپر

فیلد متنی توخالی

آناتومی

اینجا می‌توانید ابعاد فیلدهای متنی، فاصله‌ها، حاشیه‌ها و اندازهٔ آیکون‌ها را در موقعیت‌های نرمال و آیکون (ابتدایی/انتهایی)، در دو مقیاس متفاوت، ببینید.
فیلد متنی با لیبل بالارونده
فیلد متنی با لیبل بالارونده و آیکون ابتدایی و انتهایی
فیلد متنی
فیلد متنی دارای پسوند با آیکون ابتدایی و انتهایی
فیلد متنی کوچک
فیلد متنی کوچک دارای پسوند
فیلد متنی کوچک دارای پسوند با آیکون ابتدایی و انتهایی

رفتار

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

طول لیبل فیلد متنی نباید اینقدر بلند باشد که لغات در آن بریده‌‌شده یا حذف شده (سه‌نقطه) شوند.

نادرست

لیبل فیلد متنی نباید چند‌خط باشد.

نادرست

در یک فرم یا یک بخش از محتوای رابط کاربر فقط از یک نوع فیلد متنی استفاده کنید.

نادرست

فیلد متنی در آن واحد فقط یا متن راهنما را نشان می‌دهد یا متن خطا را. در صورت بروز خطا، متن خطا با متن راهنما جایگزین می‌شود.

درست

فقط زمانی فیلد متنی‌ بدون لیبل نمایش داده می‌شود که آیکون ابتدایی و متن شبح (با تأیید کارشناس دسترس‌پذیری) کاربر را شفاف و کامل راهنمایی کند.

درست

فیلد متنی می‌تواند چند خط متن راهنما یا خطا داشته باشد. هنگامی که ممکن است چند خطا رخ دهد، فقط به خطاهای محتمل‌تر اشاره کنید.

نگارش

- در متن راهنما از علائم نگارشی استفاده کنید.