Переключатель

Переключатель — это 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-переменные.