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

فیلد انتخابی

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

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

دموی تعاملی

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

متنی وارد کنید...
گزینه‌ها
استایل‌ها
وضعیت‌ها

کاربرد

فیلد انتخابی یکی از انواع فیلدهای ورودی است که انتخاب یک یا چند گزینه را از میان گزینه‌های نمایش‌داده‌شده فراهم می‌کند. فیلد انتخابی دارای ۲ کاربرد اصلی است: - در فرم‌ها مانند فیلد متنی، تعامل با آن منجر به کنش نمی‌شود و معمولاً وابسته به یک عمل ثانویه است. (مثل استفاده از دکمهٔ تأیید یا ارسال) - مجموعه‌ای از گزینه‌ها که انتخاب آن‌ها باعث واکنش صفحه می‌شود، مانند گزینه‌های مرتب‌سازی.

تفاوت با منوی کشویی (Dropdown Menu)

لیبل

متن شبح (Placeholder)

متن راهنما

منوی کشویی

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

گزینه‌ها

فیلد جستجو

نمایی از منوی کشویی فیلد انتخابی با قابلیت جستجو در میان گزینه‌ها

دکمهٔ حذفِ گزینهٔ انتخاب‌شده

پسوند متنی

چیپس حذف‌شونده

نمایی از فیلد انتخابی با چند گزینهٔ انتخاب‌شده

انواع

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

رفتار

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

فیلد انتخابی را جایگزین منوی راهبری نکنید.

نادرست

در مواردی که کاربر با انتخاب یک گزینه به صفحهٔ دیگری‌ هدایت می‌شود، نباید از فیلد انتخابی استفاده کرد.

نادرست

برای گزینه‌های کمتر از ۳تا از فیلد انتخابی استفاده نکنید. در این حالت از کامپوننت‌های دیگر مثل دکمهٔ تک انتخابی (radio button) یا segmented استفاده کنید.

درست

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

نادرست

باید مطمئن شوید در قسمت‌های انتهایی صفحه فضای کافی برای نمایش منوی کشویی وجود دارد.

نگارش

- برای لیبل جملات سوالی ننویسید. همچنین لیبل‌ها نباید جمله کامل باشند، مثلا به جای کجا هستید؟ بگویید: مکان یا محله - در لیبل‌ها و گزینه‌ها از علائم نگارشی استفاده نکنید. - متن لیبل نباید از ۳ کلمه بیشتر شود.