ЧекбоксCheckbox

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

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

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

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

Чекбокс выбирается кликом по нему или по названию. Повторный клик снимает выбор.

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

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

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

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

Неправильно

Правильно

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

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

Неправильно

Правильно

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

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

Неправильно

Правильно

Либо используйте группу радиокнопок.

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

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

Неправильно

Правильно

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

Правильно

Ещё лучше

Не используйте в формах чекбокс без названия: это может запутать пользователя, и в него сложно целиться.

Неправильно

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

Правильно

При переходе к группе чекбоксов клавишей Tab фокус получает первый чекбокс.

Следующее нажатие Tab переводит фокус на следующий чекбокс.

Фокусная рамка появляется только при переходе клавишей Tab. При наведении курсора или клике мышью она не появляется.

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

Клавиши Enter и Space выбирают пункт и снимают выбор.

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

Текст валидации располагайте под группой чекбоксов.

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

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

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

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

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

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

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

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

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

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

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