Toggle

Last updated 9 months ago

Was this helpful?

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 основных состояния тогла:

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

Фокус (Focus)

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

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

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