Toggle

Общая информация

Тогл (от англ. toggle) — переключатель. Тогл даёт пользователю возможность быстрого переключения между двумя возможными состояниями. Например, включает или отключает уведомления в настройках.

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

Для повышения доступности клика в качестве интерактивной задается область тогла (включающая Toggle + Label).

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

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

Переключатель используется для быстрого переключения между двумя возможными состояниями. Для усиления контекста тоггла используйте Label и/или иконку. Функционально тогл — аналог чекбокса, но контекст их использования может отличаться. Тогл заимствован из мобильных операционных систем, где он используется для включения и выключения настроек. Тогл нельзя использовать для выбора элементов в списке. Например, выбрать несколько писем. Тогл больше и заметнее чекбокса. Хорошо, когда на странице 1 тогл, максимум 2–3.

Способы использования

В основном тогл не используется сам по себе, поэтому к нему добавляется Label.

Оформление

Контент (Label)

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

Тогл рекомендуется располагать слева от Label, в исключительных случаях можно расположить и справа. Если тоглов несколько, лучше их ставить слева от Label.

Иконки

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

Размеры

Внешние размеры

Существует 2 размера тогла — L — 4020px и S — 3216px.

Элемент	Значение L	Значение S
Иконка	12px * 12px	9,6px * 9,6px
Тогл	W * H: 40px * 20px Switch: 16px * 16px Border: 1px (solid) (hover; off) Border-radius: 100px (hover; off) Focus border: 2px Focus border-radius: 100px	W * H: 32px * 16px Switch: 12px * 12px Border: 1px (solid) (hover; off) Border-radius: 100px (hover; off) Focus border: 2px Focus border-radius: 100px

Типографика L-Toogle

Элемент	Название стиля	Гарнитура	Кегль	Начертание
Label	Main/Body-text 14	Inter	14px	Regular

Типографика S-Toogle

Элемент	Название стиля	Гарнитура	Кегль	Начертание
Label	Main/Body-text 12	Inter	12px	Regular

Внутренние размеры

Отступы между Label и тоглом 8px независимо от размера самого тогла:

Отступ между группами тоглов зависит от выбранного размера самого тогла и их расположения:

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

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

Использование с инпутами

Если Toggle используются вместе с инпутами, они имеют размерное соответсвие. Для полей ввода размерности L и М (Inner или Outer) соответствует размер — L, для размерности S (Outer) соответствует — S.

Правила использования размеров

L -- используется в контентной области виджета и панелях

S -- в таблицах

Значения (Value) и состояния (State)

Значения (Value)

Существует только 2 Value (значения) тогла:

• Off. Выключено

• On. Включено

Состояния (State)

Существует 3 основных состояния тогла:

1. Default — по умолчанию (состояние покоя). Когда пользователь не взаимодействует с тоглом

2. Hover — при наведении курсора

3. Disable — неактивное (недоступное для взаимодействия)

Фокус (Focus)

Так же существует состояние Focus. Он появляется в момент выбора тогла с помощью клавиатуры или при клике в выбранный элемент, и может быть совмещен с состоянием Default и Hover. Невозможен в состоянии Disabled.

Взаимодействие с клавиатуры

Рамка фокуса появляется при переходе клавишей Tab, если фокус стоял на другом. Если тоглы располагаются вертикально, переключение фокуса производится клавишами ↓ ↑, если горизонтально — клавишами ← →. Нажатие клавиши Enter, включает или выключает тогл, на котором находится фокус.

Взаимодействие мышью

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

Цвета

	Default	Hover	Disabled
Off	Контент: #20222B — G12 Тело: #BFC6D7 — G4 Переключатель: #FFFFFF — G1 Фокус: #D6E5FF — B1-20	Контент: #20222B — G12 Тело: #BFC6D7 — G4 Обводка: #337EFF — B1 Переключатель: #FFFFFF — G1 Фокус: #D6E5FF — B1-20	Контент: #20222B — G12 Тело: #D6DBE7 — G3 Переключатель: #FFFFFF — G1
On	Контент: #20222B — G12 Тело: #337EFF — В1 Переключатель: #FFFFFF — G1 Фокус: #D6E5FF — B1-20	Контент: #20222B — G12 Тело: #0F62FE — В2 Переключатель: #FFFFFF — G1 Фокус: #D6E5FF — B1-20	Контент: #20222B — G12 Тело: #99BFFF — L Переключатель: #FFFFFF — G1