Checkbox
Figma
Checkbox — это элемент дизайн-системы, который позволяет пользователю выбирать один или несколько вариантов из предложенного набора опций.
Из чего состоит
  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