Чекбокс Checkbox
Чекбокс используется для управления параметром с двумя состояниями.
Чекбокс (от англ. checkbox) — дословно «отметка в квадратике».
При общении с пользователями мы говорим не «чекбокс», а «пункт», см. Глоссарий
Когда использовать
Используйте чекбокс для:
- выбора элементов списка. Например, выбор документов для массовых действий;
- выбора параметров. Например, включение уведомлений и выбор случаев, в которых нужно присылать уведомления.
Чекбокс не запускает действие немедленно. Как правило для этого нужно нажать подтверждающую кнопку. Для немедленного включения какого-то режима в интерфейсе лучше подходит тогл.
Описание работы
Клик по названию или по самому чекбоксу приводит к его выбору или снятию выбора.
В списках активная область чекбокса вытягивается на всю высоту строки:
![](img/checkbox-list-area.png)
Название группы
Название группы чекбоксов пишется с заглавной буквы.
Называйте группу чекбоксов так, чтобы:
- было понятно, что можно выбрать несколько пунктов;
- название каждого пункта не содержало повторяющуюся часть.
![](img/checkbox-02.png)
![](img/checkbox-03.png)
Название чекбокса
Название чекбокса пишется с заглавной буквы.
Формулируйте название чекбокса в положительном ключе. Не используйте отрицательные формулировки, потому что отключение такого чекбокса требует от пользователя произвести в голове логическую операцию c двумя «не». Например, «Не не получать уведомления»:
![](img/checkbox-04.png)
![](img/checkbox-05.png)
Интересное исключение — reCAPTCHA. В данном случае отрицание оправданно, потому что оно объясняет само существование этого контрола. Да и отключать такой чекбокс пользователю никогда не придется.
![](img/checkbox-robot.png)
Если пользователю может быть не очевидно, что произойдет, при включении чекбокса, объясните это дополнительным текстом или используйте группу радиокнопок:
![](img/checkbox-06.png)
![](img/checkbox-07.png)
![](img/checkbox-08.png)
Старайтесь не вставлять в название чекбокса ссылку, т. к. самое название уже является интерактивным элементом. Если все-таки хочется добавить ссылку, оставьте первые 1-2 слова обычным текстом:
![](img/checkbox-033.png)
Расположение
В общем случае группа чекбоксов должна располагаться в 1 столбец. В списке чекбоксов, размещенных горизонтально или в несколько столбцов тяжелее ориентироваться, потому что не всегда очевидна граница группы.
Разбивать чекбоксы на несколько столбцов можно, если это разделение логически обосновано и понятно пользователю.
![](img/checkbox-21.png)
![](img/checkbox-22.png)
![](img/checkbox-23.png)
![](img/checkbox-24.png)
Группа из одного чекбокса требует аккуратного обращения при верстке формы.
Один чекбокс сразу с двумя подписями выглядит странно:
![](img/check-one-acceptably.png)
Чекбокс без названия выглядит уже недопустимо, к тому же в него сложнее целиться:
![](img/check-one-wrong1.png)
Если чекбокс поставить в колонку с полями, они будут воспринимается связанными по смыслу, хотя это не так:
![](img/check-one-wrong2.png)
Такой проблемы нет, если форма верстается в одну колонку:
![](img/check-one-goodonecol.png)
Чтобы решить проблему при двухколоночной компоновке, одиночный чекбокс можно заменить на группу радиокнопок:
![](img/check-one-good-radio.png)
Если придумать уместное название для двух радиокнопок сложно, можно использовать тогл. Обычно, включение тогла приводит к моментальным изменениям в системе, но даже если такое поведение реализовать невозможно, лучше использовать тогл, чем одиночный чекбокс:
![](img/check-one-good-toggle.png)
Если чекбокс связан по смыслу с другим элементом формы, их можно группировать:
![](img/check-one-good-group.png)
![](img/check-one-good-group2.png)
Валидация
Варианты, которые нельзя выбрать в списке чекбоксов, должны быть заблокированы. Валидация может быть только в том случае, если обязательно выбрать хотя бы один вариант.
Чекбоксы с валидацией выделяются красной рамкой. Если заголовок группы находится слева, текст валидации располагайте под группой чекбоксов:
![](img/checkbox-08-01.png)
Если заголовок группы находится над группой чекбоксов, текст ошибки располагайте сразу под заголовком группы:
![](img/checkbox-08-05.png)
Если для валидации вы используете тултип, поведение подсказок будет иным. Тултип отображается при наведении на группу чекбоксов.
Если заголовок группы чекбоксов находится слева, располагайте тултип над группой чекбоксов.
![](img/checkbox-09.png)
Если заголовок группы сверху, выводите тултип справа, напротив первого чекбокса.
![](img/checkbox-09-01.png)
Предупреждение о возможной ошибке:
![](img/checkbox-10.png)
Частично выбранный чекбокс
Иногда списки с чекбоксами используются в справочниках или настройках и содержат дочерние элементы.
Если выбрана только часть дочерних чекбоксов, родительский чекбокс переходит в состояние «частично выбран».
![](img/checkbox-26.png)
Клик по стрелке сворачивает или разворачивает группу.
![](img/checkbox-28.png)
Клик в родительский чекбокс или его текст выбирает себя и все дочерние или снимает выбор, не разворачивая/сворачивая группу.
![](img/checkbox-29.png)
Если выбрана часть дочерних, родительский чекбокс отображается как квадрат.
![](img/checkbox-30.png)
Клик в квадрат выбирает все дочерние, и себя.
![](img/checkbox-29.png)
Дизайн
Выбранный чекбокс обозначается символом интерфейсных иконок.
из библиотекиНазвание группы выравнивайте по базовой линии первого пункта.
Расстояние между пунктами больше межстрочного расстояния на 10 px. Если в группе есть вложенная группа, то от ее последнего элемента до следующего элемента первого уровня нужно увеличить отступ до 20 px:
![](img/checkbox-20.png)
Состояния:
![](img/checkbox-11.png)
![](img/checkbox-15.png)
![](img/checkbox-12.png)
![](img/checkbox-13.png)
![](img/checkbox-14.png)
![](img/checkbox-16.png)
![](img/checkbox-17.png)
![](img/checkbox-18.png)
![](img/checkbox-19.png)