Определение

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

Radiobutton (переключатель) — элемент пользовательского интерфейса, позволяющий выбрать только одно значение из группы взаимоисключающих вариантов. Если вам нужно иметь невыбранное состояние, просто добавьте переключатель с параметром «Нет». Если список не помещается в ограниченном пространстве или пунктов в нем слишком много, то можно заменить компонент на выпадающий список.

Основные правила

• Пункты должны быть расставлены по определенной логикой, например, по алфавиту.
• Текст не должен быть слишком длинным (максимум 2–3 слова).
• Старайтесь избегать переносов слов.
• Пункты могут быть размещены вертикально или горизонтально.
• При горизонтальном размещении обязательно соблюдение сетки и одного размера элементов.
• Иконки списков checkbox и radiobutton необходимо выравнивать по горизонтали (слева от текста).
• Checkbox и radiobutton не запускают действие немедленно, для этого нужно нажать подтверждающую кнопку.
• Для немедленного включения какого-то режима в интерфейсе подходит switch.
• Checkbox лучше всего использовать для сообщения выбора (например, нескольких строк таблицы), в то время как radiobutton — для сообщения активации (например, включения/выключения).
• Checkbox, в отличие от radiobutton, может иметь состояние ошибки.
• Наборы checkbox и radiobutton всегда включают в себя лэйбл, который описывает, что представляет собой список опций и указывает пользователям, что делать.

Построение

• Списки checkbox и radiobutton состоят из лейбла и списка пунктов.
• Каждый пункт из списка состоит из иконки, текста и безопасного поля.
• Безопасное поле — прозрачный блок, в которое помещены и выровнены по вертикали иконка и текст пункта.
• Высота безопасного поля равна 32px, ширина — не ограничена.
• Соблюдение отступов внутри и снаружи — обязательное условие.