فیلد انتخابی
فیلد انتخابی توپُر (Filled) و توخالی (Outlined)
در فیلد انتخابی کاربر می‌تواند یک یا چند گزینه را از میان گزینه‌های نمایش‌داده‌شده انتخاب کند.
دموی تعاملی
کاربرد
فیلد انتخابی یکی از انواع فیلدهای ورودی است که انتخاب یک یا چند گزینه را از میان گزینه‌های نمایش‌داده‌شده فراهم می‌کند. فیلد انتخابی دارای ۲ کاربرد اصلی است:
- در فرم‌ها مانند فیلد متنی، تعامل با آن منجر به کنش نمی‌شود و معمولاً وابسته به یک عمل ثانویه است. (مثل استفاده از دکمهٔ تأیید یا ارسال)
- مجموعه‌ای از گزینه‌ها که انتخاب آن‌ها باعث واکنش صفحه می‌شود، مانند گزینه‌های مرتب‌سازی.
تفاوت با منوی کشویی (Dropdown Menu)
منوی کشویی حالتی از نمایش گزینه‌ها است که به شکل شناور زیر فیلد ورودی ظاهر می‌شود. منوی کشویی می‌تواند مستقل از فیلد انتخابی استفاده شود، برای مثال منوی کشویی در فیلد جستجو براساس جستجوهای قبلی یا پرتکرار کلماتی را به کاربر پیشنهاد می‌دهد.
لیبل
متن شفاف و موثری که کاربران را برای انتخاب گزینه مورد نظرشان راهنمایی می‌کند. اگر انتهای لیبل نشانهٔ «*» استفاده شده باشد، کاربر متوجه می‌شود پر کردن آن فیلد الزامی است.
در شرایطی که لازم باشد در فضای عمودی رابط کاربر صرفه‌جویی شود، با تأیید کارشناس دسترس‌پذیری، لیبل می‌تواند حذف شود. طول لیبل نباید از یک خط بیشتر شود.
متن شبح (Placeholder)
زمانی که فیلد خالی باشد این متن به کاربر نمایش داده می‌شود و معمولاً با سرنخی که به کاربر می‌دهد، انتخاب گزینهٔ مورد نظرش را راحت‌تر می‌کند.
متن راهنما
متنی که توضیحات کامل‌تری به کاربران می‌دهد تا بتوانند اطلاعات درست را در فیلد متنی وارد کنند. متن راهنما تا زمانی که فیلد در وضعیت خطا نباشد، در جای خود ثابت است و در صورت بروز خطا، متن راهنما با متن خطای فیلد متنی جایگزین می‌شود.
منوی کشویی
این منو به شکل شناور در زیر فیلد انتخابی ظاهر می‌شود و شامل تعدادی گزینه است. اگر گزینه‌ها زیاد باشند، ارتفاع این منو به ۹.۵ گزینه محدود می‌شود (فقط ۹ و نیمی از گزینهٔ ۱۰ام را نمایش می‌دهد) اما در انتهای لیست از محوکننده‌ای (fader) استفاده می‌شود تا کاربر متوجه وجود گزینه‌های دیگر بشود.
گزینه‌ها
مجموعه‌ای از سطرها که گزینه‌های منوی کشویی را نشان می‌دهد. این گزینه‌ها به شکل متنی نمایش داده می‌شوند و در فارسی به راست هم‌ترازند. توصیه می‌شود برای نمایش گزینه‌های زیاد ترتیبی انتخاب کنید.(مثلاً به‌ترتیب حروف الفبا یا از کم به زیاد) ماهیت گزینه‌ها باید همگن و نتیجه‌محور باشد.
گزینه‌ها در یک عمق می‌توانند دسته‌بندی‌ای با عناوینِ مشخص داشته باشند.(عناوین را نمی‌شود انتخاب کرد.)
از عکس و آیکون‌های تزیینی در گزینه‌های فیلد انتخابی استفاده نکنید.
متن گزینه‌ها می‌تواند چند خط باشد و نباید بریده یا خلاصه‌شده نشان داده شود.
فیلد جستجو
اگر تعداد گزینه‌ها زیاد است بهتر است ابتدای منوی کشویی از فیلد متنی جستجو استفاده کنید تا گزینه‌ها برای کاربر خلاصه شوند و کاربر بتواند گزینهٔ مورد نظر خود را راحت‌تر انتخاب کند.
با بازشدن منوی کشویی، فوکوس کیبورد روی فیلد جستجو قرار می‌گیرد.
فیلد جستجو را با فیلد انتخابی ادغام نکنید.
دکمهٔ حذفِ گزینهٔ انتخاب‌شده
این دکمه در فیلدهای تک انتخابی استفاده می‌شود و انتخاب کاربر را حذف می‌کند، اما منوی کشویی را باز نمی‌کند.
پسوند متنی
در فیلد انتخابی پسوندها سمت چپ در انتهای محل ورود اطلاعات و قبل از آیکون انتهایی می‌آیند. پسوندها معمولاً واحد اطلاعات ورودی را مشخص می‌کنند مانند واحد پولی.
چیپس حذف‌شونده
در کامپوننت چند انتخابی گزینه‌ها درون فیلد به شکل چیپس نمایش داده می‌شوند و با زدن آیکون حذف چیپس می‌توان آن‌ها را پاک کرد.
انواع
- فیلد انتخابی توپر
- فیلد انتخابی توخالی
هر دو نوع از فیلدهای انتخابی عملکرد مشابهی دارند. در انتخاب نوع فیلد انتخابی به استایل بصری رابط کاربر توجه کنید و دقت کنید فیلد انتخابی از باقی کامپوننت‌های موجود در محتوا متمایز باشد.
رفتار
در راهنمای زیر رفتار کامپوننت در کاربردهای مختلف دیزاین توضیح داده شده است.
نگارش
- برای لیبل جملات سوالی ننویسید. همچنین لیبل‌ها نباید جمله کامل باشند، مثلا به جای کجا هستید؟ بگویید: مکان یا محله
- در لیبل‌ها و گزینه‌ها از علائم نگارشی استفاده نکنید.
- متن لیبل نباید از ۳ کلمه بیشتر شود.