Тогл  Toggle

Тогл переключает состояния. Например, включает или отключает уведомления в настройках.

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

Функционально тогл — аналог чекбокса, но контекст их использования может отличаться.

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

Тогл нельзя использовать для выбора элементов в списке. Например, выбрать несколько писем.

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

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

Чтобы переключить тогл нужно кликнуть на сам контрол или его название.

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

Внешний вид

Активное состояние — стандартный синий цвет. Выключенное — полупрозрачный черный.

Анимация

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

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

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

Цвет

Цвет тогла во включенном состоянии — как у чекбоксов, радиокнопок и ссылок. Можно использовать фирменный цвет, для всех тоглов в сервисе. Можно использовать позитивный цвет там, где этого требует сценарий.

Валидация

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