چک‌باکس و رادیو

وضعیت: در حال بازبینی

حوزه‌های مورد نیاز

ارزیابی و تشخیص استراتژی کسب‌وکار و آینده‌نگری داده و هوش مصنوعی

اندازهٔ سازمان

کمتر از ۵۰ نفر ۵۰ تا ۲۵۰ نفر بیشتر از ۲۵۰ نفر

<fieldset class="hq-choice-group">
  <legend class="hq-field__label">حوزه‌های مورد نیاز</legend>
  <label class="hq-choice"><input type="checkbox" name="practice" checked /> ارزیابی و تشخیص</label>
  <label class="hq-choice"><input type="checkbox" name="practice" /> استراتژی کسب‌وکار و آینده‌نگری</label>
  <label class="hq-choice"><input type="checkbox" name="practice" /> داده و هوش مصنوعی</label>
</fieldset>
<fieldset class="hq-choice-group">
  <legend class="hq-field__label">اندازهٔ سازمان</legend>
  <label class="hq-choice"><input type="radio" name="size" /> کمتر از ۵۰ نفر</label>
  <label class="hq-choice"><input type="radio" name="size" checked /> ۵۰ تا ۲۵۰ نفر</label>
  <label class="hq-choice"><input type="radio" name="size" /> بیشتر از ۲۵۰ نفر</label>
</fieldset>

کاربرد

کدام را انتخاب کنیم

	چک‌باکس	رادیو
تعداد انتخاب	صفر، یک یا چند	دقیقاً یکی
گزینهٔ پیش‌فرض	معمولاً هیچ	بهتر است یکی انتخاب‌شده باشد
تک‌گزینه	بله، برای پذیرفتن یا روشن‌کردن یک مورد	هرگز

برای بیش از هفت گزینه از فهرست انتخابی استفاده کنید.

چیدمان

گزینه‌ها زیر هم می‌آیند. فقط برای دو یا سه گزینهٔ کوتاه، کنار هم:

روش تماس

تلفن ایمیل

<fieldset class="hq-choice-group hq-choice-group--inline">
  <legend class="hq-field__label">روش تماس</legend>
  <label class="hq-choice"><input type="radio" name="contact" checked /> تلفن</label>
  <label class="hq-choice"><input type="radio" name="contact" /> ایمیل</label>
</fieldset>

شرایط همکاری را خوانده‌ام و می‌پذیرم.

<label class="hq-choice"><input type="checkbox" /> شرایط همکاری را خوانده‌ام و می‌پذیرم.</label>

برچسب‌ها

• هر گزینه کوتاه و هم‌شکل با بقیه؛ اگر یکی فعل است، همه فعل باشند.
• گزینه‌ها ترتیب منطقی دارند: از کم به زیاد، یا به ترتیب رایج بودن.

اندازهٔ سازمان

کمتر از ۵۰ نفر ۵۰ تا ۲۵۰ نفر بیشتر از ۲۵۰ نفر

✓انجام بدهعنوان گروه (legend) می‌گوید چه چیزی انتخاب می‌شود.

تلفن
ایمیل

✕انجام ندهگزینه‌های بی‌عنوان؛ کاربر و صفحه‌خوان نمی‌دانند انتخاب برای چیست.

سبک

آناتومی

1. کنترل: ۲۰ پیکسل؛ خط border-control و زمینهٔ field. گوشهٔ چک‌باکس نصف radius-sm است و رادیو دایره.
2. برچسب: راوی Regular در اندازهٔ type-body، با فاصلهٔ space-1 از کنترل.
3. گروه: فاصلهٔ space-2 بین گزینه‌ها؛ عنوان گروه مثل برچسب فیلد.

حالت‌ها

حالت	چک‌باکس	رادیو
انتخاب‌شده	زمینهٔ accent، تیک on-accent	خط و نقطهٔ accent
روی نشانگر	خط text-secondary	خط text-secondary
فوکوس	حلقهٔ ۲ پیکسلی focus	←
غیرفعال	disabled، متن on-disabled	←

انتخاب‌نشده انتخاب‌شده غیرفعال رادیو انتخاب‌شده رادیو غیرفعال

<label class="hq-choice"><input type="checkbox" /> انتخاب‌نشده</label>
<label class="hq-choice"><input type="checkbox" checked /> انتخاب‌شده</label>
<label class="hq-choice"><input type="checkbox" checked disabled /> غیرفعال</label>
<label class="hq-choice"><input type="radio" name="s" checked /> رادیو انتخاب‌شده</label>
<label class="hq-choice"><input type="radio" name="s2" disabled /> رادیو غیرفعال</label>

حالت تیره

حوزه‌های مورد نیاز

ارزیابی و تشخیص استراتژی کسب‌وکار و آینده‌نگری داده و هوش مصنوعی

<fieldset class="hq-choice-group">
  <legend class="hq-field__label">حوزه‌های مورد نیاز</legend>
  <label class="hq-choice"><input type="checkbox" name="practice" checked /> ارزیابی و تشخیص</label>
  <label class="hq-choice"><input type="checkbox" name="practice" /> استراتژی کسب‌وکار و آینده‌نگری</label>
  <label class="hq-choice"><input type="checkbox" name="practice" /> داده و هوش مصنوعی</label>
</fieldset>

کد

<fieldset class="hq-choice-group">
  <legend class="hq-field__label">اندازهٔ سازمان</legend>
  <label class="hq-choice"><input type="radio" name="size" /> کمتر از ۵۰ نفر</label>
  <label class="hq-choice"><input type="radio" name="size" /> ۵۰ تا ۲۵۰ نفر</label>
</fieldset>

کلاس	توضیح
hq-choice-group	گروه گزینه‌ها؛ روی fieldset
hq-choice-group--inline	گزینه‌ها کنار هم
hq-choice	برچسب یک گزینه؛ input داخل آن است

کنترل‌ها همان input بومی مرورگرند و فقط ظاهرشان تغییر کرده است؛ رفتار، فرم و صفحه‌کلید بدون کد اضافه کار می‌کنند. حالت «نیمه‌انتخاب» چک‌باکس با input.indeterminate = true در JavaScript تنظیم می‌شود.

دسترس‌پذیری

• گروه همیشه <fieldset> با <legend> است.
• input داخل <label> است تا کلیک روی متن هم گزینه را انتخاب کند و ناحیهٔ لمس بزرگ‌تر شود.
• رادیوهای یک گروه name مشترک دارند؛ کلیدهای جهت بین آنها جابه‌جا می‌شوند.
• خط کنترل با زمینه دست‌کم ۳:۱ کنتراست دارد.