Чекбокс Checkbox

Чекбокс используется для управления параметром с двумя состояниями

Чекбокс (от англ. checkbox) — дословно «отметка в квадратике».

Когда использовать

Используйте чекбокс для:

  • выбора элементов списка. Например, выбор документов для массовых действий;
  • выбора параметров. Например, включение уведомлений и выбор случаев, в которых нужно присылать уведомления.

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

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

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

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

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

Называйте группу чекбоксов так, чтобы:

  • было понятно, что можно выбрать несколько пунктов;
  • название каждого пункта не содержало повторяющуюся часть.

Название чекбокса

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

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

Интересное исключение — reCAPTCHA. В данном случае отрицание оправданно, потому что оно объясняет само существование этого контрола. Да и отключать такой чекбокс пользователю никогда не придется.

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

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

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

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

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

Валидация

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

Чекбоксы с валидацией выделяются красной рамкой. Если заголовок группы находится слева, текст валидации располагайте под группой чекбоксов:

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

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

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

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

Предупрждение о возможной ошибке:

Дизайн

Выбранный чекбокс обозначается символом  из шрифта Kontur Iconic.

Название группы выравнивайте по базовой линии первого пункта.

Расстояние между пунктами больше межстрочного расстояния на 10 px. Если в группе есть вложенная группа, то от ее последнего элемента до следующего элемента первого уровня нужно увеличить отступ до 20 px:

Состояния: