Тогл Toggle

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

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

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

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

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

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

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

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

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

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

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

Цвет

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

Валидация

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

Дизайн и анимация

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

Активное состояние — стандартный синий цвет #3072C4. Выключенное — серый #F2F2F2.

Состояния: