Тогл — это элемент интерфейса, позволяющий пользователю выбирать один вариант из группы взаимоисключающих опций. В отличие от переключателя, который управляет одним параметром, тогл работает с группой связанных состояний и часто используется для переключения между режимами просмотра, фильтрами или настройками. Тогл объединяет несколько опций в единый визуальный блок, где активное следует явно выделять на фоне остальных. Каждый элемент группы должен быть удобным для выбора, а общая композиция наглядно отражает то, что опции связаны между собой.
Базовая анатомия
Контейнер тогла должен объединять все опции в один интерактивный элемент. Каждая опция имеет свою активную область, а индикатор текущего выбора визуально выделяет активный элемент. Важно соблюдать равные отступы и пропорции для всех состояний, чтобы элемент выглядел гармонично.
Анатомия с иконками
Подписи у опций стоит делать лаконичными и понятными. При необходимости их можно дополнить иконками, но нужно следить, чтобы они не перегружали интерфейс. Активный элемент может быть дополнительно выделен цветом фона или текста.
Тогл должен четко реагировать на каждое действие, чтобы у пользователя не возникало вопросов и сомнений, какая опция была выбрана.
Default
Необходимо, чтобы в дефолтном состоянии все опции были читаемыми, а текущий выбор явно выделялся. Неактивные опции должны быть заметными, но не отвлекать внимание от активной.
Hover
При наведении на неактивную опцию появляется небольшой отклик, который создаст эффект интерактивности, например, изменение цвета или небольшое изменение фона, говорящее о возможности выбора.
Active
В момент выбора должна произойти плавная анимация перемещения индикатора активности. Изменения должны быть заметными, но не отвлекать от остального контента.
Disabled
В неактивном состоянии тогл сохраняет своё визуальное единство, но становится менее контрастным. Текущий выбор, если он был, должен остаться различимым за счет небольшого контраста с остальными опциями.
