Checkbox

Чекбокс — это элемент интерфейса, который позволяет пользователям выбирать один или несколько вариантов из предложенных.

§Примеры использования

После активации чекбокса действие не запускается мгновенно. Чтобы изменения вступили в силу, нужно нажать кнопку подтверждения (например, «Сохранить», «Применить», «Отправить»). В большинстве случаев чекбокс применяется вместе с лейблом, поясняющим его значение. Однако существуют сценарии, где чекбокс может использоваться без лейбла, например, в таблицах или в случаях, когда выводить лейбл «Включить» рядом с каждым чекбоксом может быть излишним. Текст стоит начинать с положительной формулировки, например, «Включить» вместо «Выключить», иначе пользователю приходится решать логическую задачу.

§Анатомия

Чекбокс состоит из:

1. Контейнера — визуальной области прямоугольной формы, которая окружает чекбокс. Контейнер служит для обозначения границы и активации чекбокса.
2. Галочки — символа, который появляется внутри контейнера, когда чекбокс активирован. Этот символ служит визуальным подтверждением выбора пользователем данного чекбокса.
3. Текстового лейбла (опционально) — текста, который располагается справа от чекбокса. Текстовый лейбл объясняет значение или назначение чекбокса.

§Размеры

Компонент Checkbox имеет два основных размера:

M — используется по умолчанию и имеет стандартные размеры, подходящие для большинства случаев. В этом размере контейнер составляет 14x14 px, а для текстового лейбла используется шрифт 13 px.

L — используется, если нужно выделить чекбокс среди других элементов интерфейса или если в интерфейсе требуются более крупные элементы для удобства использования. В этом размере контейнер составляет 17x17 px, а для текстового лейбла используется шрифт 15 px.

§Состояния

Default — основное состояние чекбокса, по клику можно включить или выключить.

Hover — состояние при наведении курсора на область чекбокса (чекбокс + лейбл).

Disable — состояние, когда взаимодействие с чекбоксом по каким-либо причинам недоступно.

Indeterminate — состояние заголовка группы чекбоксов, когда выбран один из нескольких элементов (часто встречается в таблицах с множественным выделением строк).

§Рекомендации

§Стоит использовать

• Выбор опций — когда пользователю нужно выбрать одну или несколько опций из представленного списка.

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

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

• Фильтрация контента или результатов — в фильтрах, где пользователь выбирает параметры для фильтрации контента или результатов поиска.

§Не стоит использовать

• Выбор только одной опции — если пользователь должен выбрать только одну опцию из набора взаимоисключающих вариантов, то лучше использовать радиокнопки (radio).

• Двухпозиционное включение/выключение (мгновенное действие) — если опция имеет только два состояния (включено и выключено) и изменения должны вступать в силу мгновенно без нажатия кнопки «Применить», то для этой цели лучше использовать переключатели (switches). Они предоставляют более ясное и краткое представление для таких опций и позволяют сразу применить изменения.

• Сегментированный выбор — если есть несколько взаимоисключающих опций, которые можно выбрать одновременно в разных категориях, используйте элементы управления сегментами (segment controls). Они позволяют пользователю выбирать опции в разных сегментах или категориях.

• Выбор из большого количества опций — если есть длинный список опций, из которых нужно выбрать одну, лучше использовать выпадающий список (select). Это сэкономит место на экране и облегчит выбор из большого набора вариантов.

§Написание текста

• Стремитесь к краткости в описании текста. Избегайте длинных фраз или сложных предложений.
• Используйте активные глаголы, которые четко указывают на действие, связанное с выбором (например, «Подписаться на рассылку» вместо «Подписка на рассылку»).
• Давайте пользователям полное представление о том, что произойдет, если он выберет чекбокс (например, «Получать уведомления о новых статьях» вместо «Уведомления»).