НачалоОсновыКомпонентыТексты
Обзор
Кнопка Кнопка-иконка Кнопка с меню Группа кнопок Кнопка-переключатель Группа переключателей
Бейдж Баннер Пустое состояние Индикатор прогресса Кольцо прогресса Сообщение в разделе Скелетон Индикатор загрузки Уведомление
Field Поле ввода Textarea Number input Number stepper Search field OTP input Поле телефона Чекбокс Радиогруппа Переключатель Слайдер Карточка выбора Редактирование на месте
Select family Select Combobox Multiselect Country select Выбор даты Выбор периода Выбор времени Календарь Выбор эмодзи
Диалог Шторка Поповер Меню Подсказка
Боковая панель Навигационное меню Вкладки Сегментированный переключатель Хлебные крошки Пагинация Дерево
Таблица Таблица данных Аватар Группа аватаров Тег Иконка Изображение
Текст Prose Ссылка Блок кода Kbd
Аккордеон Раскрывающийся блок Разделитель Область прокрутки Разделитель панелей Соотношение сторон
Заголовок страницы

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

Переключатель включает или выключает одну настройку, и изменение применяется сразу. Кнопки «Сохранить» нет.

Стабильный Figma
ОбзорИспользованиеAPIДоступность
Auto-enhance photos
<tk-switch checked helper="Applies to all new uploads">Auto-enhance photos</tk-switch>

Анатомия

Часть Что это
tk-switch сам элемент; одна остановка Tab
слот по умолчанию подпись перед дорожкой, обязательна; она же доступное имя, в ней может быть ссылка
подсказка необязательный текст под подписью
дорожка скруглённая полоса; акцентная во включённом виде, серая в выключенном
ползунок белая скруглённая плашка, которая уходит на сторону «вкл» или «выкл»
знаки ✓ и ✕ внутри дорожки; вместе с положением ползунка показывают состояние без цвета
индикатор загрузки рядом с дорожкой, пока задан loading

Вся строка, подпись и дорожка, нажимается целиком. Длинная подпись переносится, а дорожка остаётся на уровне её первой строки. В интерфейсах справа налево всё отражается зеркально.

Размеры

Show previews Compact rows
<tk-switch>Show previews</tk-switch>
<tk-switch size="small">Compact rows</tk-switch>
size Дорожка Ползунок
medium (по умолчанию) 40 × 20px 20 × 16px
small 32 × 16px 16 × 12px

Строка в обоих размерах не ниже 24px. small берите только для плотных списков настроек. Подпись и подсказка не меняют размер.

Состояния

Wi-Fi Essential cookies Sync over cellular
<tk-switch checked>Wi-Fi</tk-switch>
<tk-switch checked disabled>Essential cookies</tk-switch>
<tk-switch loading>Sync over cellular</tk-switch>

При наведении дорожка меняет оттенок. При фокусе с клавиатуры вокруг дорожки появляется рамка.

  • checked: начальное состояние. Нажатие его переключает; текущее состояние читайте из свойства checked.
  • disabled: на переключатель нельзя перейти, его нельзя изменить. Подходит для настроек, которые обязаны оставаться включёнными, и для строк, выключенных родительской настройкой. Отключённая дорожка серая и во включённом, и в выключенном виде, а в тёмной теме они одного цвета, поэтому состояние показывают ползунок и знак ✓ или ✕.
  • loading: переключатель сохраняет текущее состояние, не реагирует на ввод и остаётся в фокусе. Рядом появляется индикатор, а если ожидание дольше 2 секунд, скринридер произносит «Loading».

Состояния ошибки нет. Если сохранить не удалось, оставьте переключатель как был и сообщите о проблеме в другом месте, например в Toast.

Сохранение на сервер

Чтобы переключатель сработал только после успешного сохранения, отмените нажатие, покажите loading и поставьте checked сами:

<tk-switch id="sync">Sync over cellular</tk-switch>
<script>
  const sync = document.querySelector('#sync');
  sync.addEventListener('click', async (e) => {
    e.preventDefault();
    sync.loading = true;
    const next = !sync.checked;
    if (await save(next)) sync.checked = next;
    sync.loading = false;
  });
</script>

Без обработчика переключатель срабатывает сразу. Так и нужно для настроек, которые хранятся на устройстве.

Списки настроек

Переключатели друг под другом — это ваша вёрстка; каждый работает сам по себе. Если строк больше пяти, добавьте заголовки разделов. Если один переключатель управляет остальными, ставьте disabled на зависимые строки, пока он выключен. С label-hidden подпись всё равно должна называть настройку.