Checkbox

Общая информация

Чекбокс (галочка, флажок) — атомарный элемент графического пользовательского интерфейса, позволяющий пользователю выбрать несколько элементов или параметров из списка. Он не запускает действие немедленно. Как правило для этого нужно нажать подтверждающую кнопку. Чекбокс используют для множественного выбора, а не для взаимоисключающего - каждый флажок работает независимо от других в списке (его установка не влияет на другие варианты выбора).

Способы использования

Чекбокс будучи атомарным элементом не используется сам по себе. К нему добавляется Label или он используется в составе ячеек таблицы.

Описание работы

Для повышения доступности клика в качестве интерактивной задается область чекбокса (включающая Чекбокс + Label).

Клик по названию или по самому чекбоксу приводит к его выбору или снятию выбора.

Клик в родительский чекбокс или его Label выбирает себя и все дочерние или снимает выбор, не разворачивая/сворачивая группу.

Клик по стрелке сворачивает или разворачивает группу.

Варианты использования

В основном чекбокс используется в:

формах
фильтрации и выборе элементов для мультивыбора (пакетного действия)

Формы

В формах на всю страницу, модальных окнах, SideMenu или любых виджетах.

Фильтрация и выбор элементов для муьтивыбора (пакетного действия)

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

Оформление

Контент (Label)

Контент чекбокса пишется с заглавной буквы.

Формулируйте контент чекбокса в положительном ключе. Не используйте отрицательные формулировки, потому что отключение такого чекбокса требует от пользователя произвести в голове логическую операцию c двумя «не». Например, «Не не получать уведомления»:

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

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

Старайтесь не вставлять в название чекбокса ссылку, т.к. самое название уже является интерактивным элементом. Если все-таки хочется добавить ссылку, оставьте первые 1-2 слова обычным текстом:

Переполнение контента

Мы рекомендуем:

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

Чексбокс и Label должны быть выровнены по верхнему краю.

Название группы

Если у группы чекбоксов есть название, то рекомендуем:

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

Размеры

Внешние размеры

В нашей дизайн-системе существует 2 размера чекбокса — L — 20*20px и S — 16*16px.

Чекбокс размера S используется в таблицах и с интпутами Outer размера S , во всех других случаях используется чекбокс размера L.

Внутренние размеры

Отступы между контентом и чекбоксом 8px независимо от размера самого чекбокса:

Отступ между группами чекбоксов зависит от выбранного размера самого чекбокса и их расположения:

Если в группе чекбоксов в родительском элементе есть дочерние, то дочерний чекбокс выравнивается относительно линии набора родительского:

Расположение

Группу чекбоксов можно расположить вертикально или горизонтально в зависимости от задачи. Рекомендуется располагать группы чекбоксов вертикально для облегчения чтения. В списке чекбоксов, размещенных горизонтально или в несколько столбцов тяжелее ориентироваться, потому что не всегда очевидна граница группы.

Разбивать чекбоксы на несколько столбцов можно, если это разделение логически обосновано и понятно пользователю.

Значения (Value) и состояния (State)

Значения (Value)

Существует 3 значения чекбокса:

Unselected. Не выбрано
Selected. Выбрано
Mix. Частично выбрано

Когда элементы списка сгруппированы по общему признаку (родительскому элементу). Вы можете использовать родительский чекбокс, чтобы сделать или отменить массовый выбор всех его дочерних элементов. Кроме того, вы можете выбрать дочерние элементы по отдельности.

Если все дочерние элементы выбраны, родительский элемент имеет значение “Selected”
Если ни один из дочерних элементов не выбран, родительский элемент имеет значение “Unselected”
Если выбрана часть дочерних элементов, родительский элемент имеет значение “Mix” (частично выбран)

Состояния (State)

Существует 3 основных состояния чекбокса:

Default — по умолчанию (состояние покоя). Когда пользователь не взаимодействует с чекбоксом
Hover — при наведении курсора
Disable — неактивное (недоступное для взаимодействия)

Фокус (Focus)

Так же существует состояние Focus. Он появляется в момент выбора чекбокса с помощью клавиатуры или при клике в выбранный элемент, и может быть совмещен с состоянием Default и Hover. Невозможен в состоянии Disabled.

Взаимодействие с клавиатуры

Рамка фокуса появляется при переходе клавишей Tab, если фокус стоял на другом. Если чеекбоксы располагаются вертикально, переключение фокуса производится клавишами ↓ ↑, если горизонтально — клавишами ← →. Нажатие клавиши Enter, выбирает чекбокс, на которой находится фокус.