Тогл Toggle

Тогл переключает состояния.

По-английски toggle — рычаг или переключатель. Между собой мы говорим «тогл», чтобы не путать этот контрол с радиокнопками и табами-переключателями. С пользователями говорим «переключатель», а не «тогл».

Тогл пришёл из мобильных операционных систем, где он включает и выключает настройки.

Когда использовать

Тогл — аналог чекбокса, но контексты использования у них разные.

Используйте тогл, чтобы включать и выключать настройки — например, уведомления или отправку отчётов.

Тоглом нельзя выбирать элементы в списке, например несколько строк. Для этого используйте чекбокс.

Тогл больше и заметнее чекбокса, поэтому хорошо, когда на странице он 1, максимум 2 — 3.

Описание работы

Тогл переключается кликом по нему или по названию.

При переключении эффект наступает сразу, поэтому тоглу не нужна кнопка «Сохранить».

Название

Пишите название тогла с заглавной буквы.

Не используйте в названии глаголы «Включить» и «Выключить» — этот смысл уже заложен в метафору контрола.

Неправильно

Правильно

Формулируйте название тогла в положительном ключе. Отрицательное название создаёт двойное отрицание: чтобы выключить тогл «Не отправлять отчёты», пользователь читает его как «Не не отправлять отчёты».

Неправильно

Правильно

Не меняйте название при переключении: подпись остаётся одной и той же в обоих состояниях.

Неправильно

Правильно

Не используйте вопросительные формулировки.

Неправильно

Правильно

Если пользователю может быть непонятно, что произойдёт при включении тогла, поясните это дополнительным текстом.

Название тогла может занимать несколько строк.

Расположение

В отличие от чекбокса, тогл может стоять слева или справа от названия.

Если тоглов 2 — 3, лучше расположить их слева от текста.

Управление клавиатурой

Тогл получает фокус при переходе к нему клавишей Tab.

Следующее нажатие Tab переводит фокус на следующий контрол.

Фокусная рамка появляется только при переходе клавишей Tab. При наведении курсора или клике мышью она не появляется.

Тогл включается и выключается клавишами Enter и Space.

Валидация

Если тогл нельзя использовать, заблокируйте его. Валидация не нужна.

Анимация

Тогл переключается с анимацией. Круг плавно перемещается, фон движется за ним.