Дизайн в БАРС Груп

Определение

Checkbox (Флажок) — это элемент интерфейса, который позволяет пользователю выбрать одно или несколько значений из предложенного списка. Он представляет собой квадратную или прямоугольную область с маркером, который может быть отмечен или снят.

Функциональность

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

Checkbox не кнопка, а выбор значений. Он не запустит действие. Исходя из контекста интерфейса, Checkbox необходимо использовать в тандеме с кнопкой.

Checkbox используется:

В формах на всей странице, в модальных окнах или на боковых панелях
Для выбора согласия с условиями
Для фильтрации данных на странице, в меню или внутри элемента. Checkbox используются в таблицах как для пакетного редактирования, так и для одиночного
В таблицах используется при наличии родительских и дочерних пунктов.Родительский Checkbox отвечает за массовый выбор всех элементов списка. Снятие флажка с родителя отменяет выбор всех элементов списка

Дизайн и Стиль

Размер и Форма

Checkbox должен быть оптимального размера в контексте всего интерфейса. Ширина текстовой области ограничена до 320px.

Цвет и Контраст

Checkbox хорошо видим даже на разноцветных фонах. Соблюдайте общие цветовые правила дизайн-системы. Палитра Plex отвечает стандартам контрастности WCAG.

Текст и иконки

Краткость текста

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