Перемикач

Перемикач — це input type="checkbox" з role="switch". Використовуйте його для параметрів, які можна ввімкнути або вимкнути.

#Нативні елементи

<label>
  <input type="checkbox" role="switch" checked />
  Увімкнути сповіщення
</label>
<label>
  <input type="checkbox" role="switch" />
  Увімкнути оновлення
</label>
<label>
  <input type="checkbox" role="switch" disabled />
  Недоступне налаштування
</label>
<div>
  <label>
    <input
      type="checkbox"
      role="switch"
      aria-invalid="true"
      aria-describedby="switch-error"
    />
    Увімкнути автоматичні оновлення
  </label>
  <small id="switch-error">Увімкніть оновлення, щоб продовжити.</small>
</div>

#Класи розширень

Повна збірка додає trace-small і trace-large. Середній розмір застосовується типово.

<label>
  <input type="checkbox" role="switch" class="trace-small" />
  Малий
</label>
<label>
  <input type="checkbox" role="switch" />
  Середній
</label>
<label>
  <input type="checkbox" role="switch" class="trace-large" />
  Великий
</label>

Використовуйте trace-switch як обгортку перемикача й необов’язкової декоративної іконки. Поле й іконка мають бути безпосередніми нащадками обгортки.

<label>
  <span class="trace-switch">
    <input type="checkbox" role="switch" checked />
    <span class="trace-icon"><!-- @license lucide-static v1.70.0 - ISC -->
<svg focusable="false" aria-hidden="true"
 
  xmlns="http://www.w3.org/2000/svg"
  width="24"
  height="24"
  viewBox="0 0 24 24"
  fill="none"
  stroke="currentColor"
  stroke-width="2"
  stroke-linecap="round"
  stroke-linejoin="round"
>
  <path d="M20 6 9 17l-5-5" />
</svg>
</span>
  </span>
  Увімкнути сповіщення
</label>

Оформлення задають CSS-змінні.