Switch
Figma
Switch — позволяет пользователям переключаться между различными опциями или состояниями.
Из чего состоит
  1. Внешний лейбл
  2. Текст
  3. Область свитча
  4. Переключатель
  5. Описание под полем
  6. Ошибка
Основные
Отключаемые
Редактируемые
Основные свойства
Тема (Theme)
Состояние (State)
Размер (Size)
Выбран (Selected)
Отключаемые элементы
👁 Внешний лейбл (Outside Label)
👁 Текст (Text)
👁 Описание (Description)
Редактируемые элементы
✏️ Внешний лейбл (Outside Label)
✏️ Текст (Text)
✏️ Описание (Description)
✏️ Ошибка (Error)
Акцентный цвет (day)
Могут принимать акцентный цвет.
Акцентный цвет (night)
Могут принимать акцентный цвет.
Максимум символов
Текст должен быть не больше 128 символов.
Группы свитчей
Можно использовать в виде группы с заголовками или лейблами.
Размер свитчей S: отступы 24px
Размер свитчей XS: отступы 16px
Размер свитчей XXS: отступы 12px
Размещение с другими компонентами
для сочетания компонентов между собой соотносятся размеры текстов по следующему правилу (на примере инпутов): самый большой инпут = самый большой свитч и тд.
инпут L = свитч S,
инпут M = свитч XS,
инпут S = свитч XXS