Чекбокс Checkbox

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

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

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

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

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

В списках активная область чекбокса вытягивается на всю высоту строки:

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

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

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

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

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

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

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

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

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

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

Группа из одного чекбокса требует аккуратного обращения при верстке формы.

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

Чекбокс без названия выглядит уже недопустимо, к тому же в него сложнее целиться:

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

Такой проблемы нет, если форма верстается в одну колонку:

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

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

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

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

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

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

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

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

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

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

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

Если выбрана только часть дочерних чекбоксов, родительский чекбокс переходит в состояние «частично выбран».

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

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

Если выбрана часть дочерних, родительский чекбокс отображается как квадрат.

Клик в квадрат выбирает все дочерние, и себя.

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

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

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

Состояния: