Тогл Toggle
Figma
ReactТогл переключает состояния. Например, включает или отключает уведомления в настройках.
По-английски toggle — рычаг или переключатель. Между собой мы говорим «тогл», чтобы не путать этот контрол с радиокнопками или табами-переключателем. Тем не менее при общении с пользователями мы говорим не «тогл», а «переключатель».
Когда использовать
Функционально тогл — аналог чекбокса, но контекст их использования может отличаться.
Тогл заимствован из мобильных операционных систем, где он используется для включения и выключения настроек.
Тогл нельзя использовать для выбора элементов в списке. Например, выбрать несколько писем.
Тогл больше и заметнее чекбокса. Хорошо, когда на странице 1 тогл, максимум 2–3.
Описание работы
Чтобы переключить тогл, нужно кликнуть на сам контрол или его название.
При переключении тогла эффект наступает сразу. Поэтому тогл не нуждается в кнопке «Сохранить».
Расположение
В отличие от чекбокса, тогл может располагаться как слева, так и справа от названия. Если тоглов несколько, лучше их ставить слева от текста.
Цвет
Цвет тогла во включенном состоянии — как у чекбоксов, радиокнопок и ссылок. Можно использовать фирменный цвет, для всех тоглов в сервисе. Можно использовать позитивный цвет там, где этого требует сценарий.
Валидация
Если тогл нельзя использовать, заблокируйте его. Валидация не нужна.
Дизайн и анимация
Тогл переключается с анимацией. Круг плавно перемещается, фон движется за ним:
Активное состояние — стандартный белый цвет #FFFFFF. Выключенное — серый #F6F6F6 по умолчанию и #D6D6D6 для выбранного.
Состояния:
