Переключатель

Переключает два противоположных состояния без подтверждения действия в формате «вкл/выкл».

Используется

  • При включении и выключении свойства, режима или функции.

Не используется

  • Для подтверждения действий пользователя, например принятие условий. Вместо этого используйте Checkbox .
  • Для выбора из нескольких доступных вариантов, вместо этого используйте Radio button или Checkbox.

Строение компонента

Size

  1. Лейбл
  2. Состояние/описание
  3. Фон
  4. Переключатель
Лейбл

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

Состояние/описание

При использовании в качестве состояния служит дополнительной подсказкой пользователю о включенном или выключенном состоянии переключателя.

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

Фон

Является дополнительным индикатором, меняя цвет в зависимости от текущего состояния.

Переключатель

Меняет свое положение в зависимости от состояния переключателя.

Цвета

Размеры

Size

Типографика

Поведение

Size

Состояния

Ссылки на сторонние полезные материалы про UX

Новое мажорное обновление!
Мы активно разрабатываем дизайн систему CDS 3.0 на Vue 3