Checkbox | Guideline

Checkbox используется исключительно в списках, где нужен множественный выбор. Всегда нуждается в кнопке, подтверждающей выбор, например «Сохранить».

В случае, когда есть главный checkbox и подчиненные – возможно частичное включение со знаком «–».

Checkbox не отвечает за включение, выключение и добавления какого-либо функционала на странице. Для этого необходимо пользоваться Switch

Как правильно написать текст – читайте в текстовом гайде

Внешний вид

Размеры, Шрифты

icon — select.svg 20х20 px

text Regular 15 px

line 2x8 px

text Regular 15 px

Ориентация

Внешний вид

Vertical

Horisontal

Состояние

Внешний вид

Цвета

Inactive

background (0, 0%, 100%, 1)

stroke 1 px (0, 0%, 84%, 1)

text (0, 0%, 20%, 1)

Hover

background (0, 0%, 96%, 1)

stroke (0, 0%, 84%, 1)

Click

background (202, 72%, 56%, 1)

annimation (0, 0%, 96%, 1)

Checked

background (202, 72%, 56%, 1)

icon (0, 0%, 100%, 1)

Checked hover

background (202, 84%, 60%, 1)

icon (0, 0%, 100%, 1)

Disable

background (0, 0%, 100%, 1)

stroke (0, 0%, 92%, 1)

text (0, 0%, 84%, 1)

Disable checked

background (0, 0%, 92%, 1)

icon (0, 100%, 100%, 1)

text (0, 0%, 84%, 1)

Loading

icon 20x20 px