کلید روشن و خاموش

وضعیت: پیش‌نویس

دریافت خبرنامهٔ ماهانه یادآوری جلسه با پیامک گزارش هفتگی (به‌زودی)

<label class="hq-toggle">
  <input class="hq-toggle__input" type="checkbox" role="switch" checked />
  <span class="hq-toggle__track"></span>
  دریافت خبرنامهٔ ماهانه
</label>
<label class="hq-toggle">
  <input class="hq-toggle__input" type="checkbox" role="switch" />
  <span class="hq-toggle__track"></span>
  یادآوری جلسه با پیامک
</label>
<label class="hq-toggle">
  <input class="hq-toggle__input" type="checkbox" role="switch" disabled />
  <span class="hq-toggle__track"></span>
  گزارش هفتگی (به‌زودی)
</label>

کاربرد

چه وقت استفاده کنیم

• تنظیمی که با یک لمس فوراً اعمال می‌شود: روشن کردن اعلان، نمایش حالت تیره.
• فقط دو حالت دارد و حالت «خاموش» معنای روشنی دارد.

چه وقت استفاده نکنیم

• داخل فرمی که دکمهٔ ارسال دارد؛ آنجا چک‌باکس درست است، چون چیزی تا ارسال اعمال نمی‌شود.
• برای پذیرفتن شرایط و قرارداد؛ آن هم چک‌باکس است.
• وقتی بیش از دو حالت هست؛ از رادیو یا فهرست انتخابی استفاده کنید.

برچسب

برچسب نام تنظیم است، نه فرمان: «دریافت خبرنامه»، نه «خبرنامه را روشن کن». اگر حالت فعلی از برچسب معلوم نیست، متن کوتاه حالت («روشن» یا «خاموش») را با hq-toggle__state کنار آن بگذارید.

✓انجام بدهکلید برای تنظیمی که فوراً اعمال می‌شود.

✕انجام ندهکلید داخل فرم تماس به جای چک‌باکس؛ کاربر نمی‌داند با زدنش چیزی ارسال شد یا نه.

سبک

آناتومی

1. ریل: پهنای size-control-lg، ارتفاع space-3، گوشهٔ radius-pill. خاموش border-control، روشن accent.
2. دستگیره: دایرهٔ سفید که در حالت روشن به سمت انتهای خط (چپ در فارسی) می‌رود.
3. برچسب: راوی Regular در type-body.

حرکت دستگیره motion-duration-fast-02 با motion-easing-standard است.

حالت تیره

دریافت خبرنامهٔ ماهانه یادآوری جلسه با پیامک گزارش هفتگی (به‌زودی)

<label class="hq-toggle">
  <input class="hq-toggle__input" type="checkbox" role="switch" checked />
  <span class="hq-toggle__track"></span>
  دریافت خبرنامهٔ ماهانه
</label>
<label class="hq-toggle">
  <input class="hq-toggle__input" type="checkbox" role="switch" />
  <span class="hq-toggle__track"></span>
  یادآوری جلسه با پیامک
</label>
<label class="hq-toggle">
  <input class="hq-toggle__input" type="checkbox" role="switch" disabled />
  <span class="hq-toggle__track"></span>
  گزارش هفتگی (به‌زودی)
</label>

کد

<label class="hq-toggle">
  <input class="hq-toggle__input" type="checkbox" role="switch" />
  <span class="hq-toggle__track"></span>
  دریافت خبرنامهٔ ماهانه
</label>

کلاس	توضیح
hq-toggle	ظرف و برچسب
hq-toggle__input	چک‌باکس پنهان با role="switch"
hq-toggle__track	ریل و دستگیره
hq-toggle__state	متن اختیاری حالت

دسترس‌پذیری

• role="switch" روی چک‌باکس واقعی؛ صفحه‌خوان «روشن» و «خاموش» می‌خواند.
• صفحه‌کلید: Tab برای رسیدن، Space برای تغییر حالت.
• حالت فقط با رنگ نشان داده نمی‌شود؛ جای دستگیره هم عوض می‌شود.