Чекбоксы и радиокнопки: как выбрать элемент для формы

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

Например, при записи на мастер-класс нужно выбрать одну сессию, но можно заказать несколько дополнительных учебных материалов. Это вопросы одной формы, однако для них нужны разные элементы управления. В общем руководстве по дизайну форм такие решения связаны с подписями, проверкой данных и отправкой. Здесь подробно разберём сам выбор вариантов и то, как объяснить его пользователю.

Начните с ответа, который должна сохранить форма

Прежде чем выбирать компонент, запишите несколько допустимых ответов обычными словами. «Во вторник утром» — допустимый ответ на вопрос «Какую сессию вы посетите?». «Во вторник утром и в четверг днём» — нет, если запись разрешена только на одну сессию. Радиокнопки передают это правило: новый выбор заменяет предыдущий.

Для учебных материалов возможны ответы «Печатные материалы», «Практические задания», «Оба» и «Ничего». Два чекбокса непосредственно выражают эти независимые решения. Список «Конспект / Упражнения / Оба / Ничего» без необходимости превращает два простых выбора в перечень их сочетаний.

Вопрос	Допустимый ответ	Подходящий элемент
Какую сессию мастер-класса вы посетите?	Одна из доступных сессий	Группа радиокнопок
Какие дополнительные материалы вам нужны?	Ни одного, один или несколько независимых материалов	Группа чекбоксов
Хотите получить письмо после мастер-класса?	Одна необязательная возможность: выбрана или нет	Отдельный чекбокс с ясной утвердительной подписью
Нужно сразу включить сохранённую настройку аккаунта?	Настройка меняется в момент активации	Вместо выбора в форме стоит рассмотреть переключатель

«Выберите не более двух» — по-прежнему множественный выбор. Используйте чекбоксы и объясните ограничение. Определите, что произойдёт при попытке отметить третий пункт; не снимайте незаметно одну из предыдущих отметок. И наоборот, группа чекбоксов, в которой разрешён только один пункт, фактически становится замаскированной группой радиокнопок.

Соберите пример записи на мастер-класс

В форме две группы. Первая обязательна: Выберите занятие, варианты — «Вторник, 10:00–12:00» и «Четверг, 14:00–16:00». Вторая необязательна: Дополнительные материалы, варианты — «Печатные материалы» и «Практические задания». Следующее действие — «Проверить запись».

Разместите сессии вертикальной группой радиокнопок. Добавьте пояснение «Один вариант», если правило недостаточно понятно из контекста. Покажите день и время рядом с каждым элементом, чтобы варианты можно было сравнить без открытия дополнительной панели.

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

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

На экране проверки покажите итог человеческим языком: «Четверг, 14:00–16:00» и «Материалы: печатные материалы, практические задания». Человек не должен расшифровывать «Выбрана радиокнопка 2» или две галочки без подписей, чтобы понять свою запись.

Осмысленно выбирайте значения по умолчанию

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

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

Повторное нажатие на выбранную радиокнопку обычно не очищает группу. Если вопрос действительно допускает отсутствие ответа, предусмотрите понятный вариант вроде «Нет предпочтений» или явный способ сбросить выбор. Подпись должна соответствовать сохраняемому смыслу: «Нет предпочтений» и «Я ещё не ответил» — не одно и то же.

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

Иногда нужен отдельный ответ «Ничего из перечисленного», поскольку продукт должен различать намеренный отказ и пропущенный вопрос. Тогда меняется поведение группы: объясните, что этот ответ снимает остальные отметки, а выбор другого пункта отменяет его. Если правило усложняет форму, попробуйте разделить вопрос на простой первый шаг и уточнение.

Сохраняйте видимым общий вопрос группы

«Вторник» и «Четверг» — подписи вариантов. «Выберите занятие» — вопрос, который их объединяет. Нужны оба уровня. Без общего названия человек, вернувшийся к форме, может не понять, относятся ли даты к мастер-классу, доставке или следующей встрече.

Пишите варианты в одинаковой форме и располагайте различающиеся сведения в одном порядке. «Вторник, 10:00–12:00» и «Четверг, 14:00–16:00» проще сравнить, чем «Во вторник утром» и «Дневной мастер-класс в четверг». Короткие пояснения нужны там, где они влияют на выбор: например, для формата или места проведения.

В длинном варианте выровняйте элемент управления по первой строке и разрешите перенос подписи. Подпись и пояснение должны оставаться одной группой. Многострочный текст не должен сдвигать кружок в промежуток между двумя вариантами или превращать пояснение в самостоятельный пункт.

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

Для длинного списка может понадобиться другой компонент. В руководстве по выпадающим спискам разобрано, когда полезнее компактный список или поиск по вариантам. Но короткий и важный выбор не стоит прятать только ради нескольких строк высоты.

Объясняйте ошибки, не стирая сделанный выбор

Если участник отметил оба материала, но продолжил без сессии, покажите рядом с группой конкретное сообщение: «Выберите занятие, чтобы продолжить». Отметки материалов сохраните. Ошибка относится к одному отсутствующему ответу, а не ко всей форме.

Разместите сообщение так, чтобы его связь с группой была очевидна. Одинаковая ошибка под каждой радиокнопкой превращает одну проблему в несколько. Если в рабочей форме есть сводка ошибок, ссылка из неё должна вести к нужному вопросу.

Если запись на четверг недоступна, объясните причину обычными словами. Серый пункт без пояснения может означать отсутствие мест, ещё не открывшуюся запись или ограничение для конкретного пользователя. Если ранее выбранная сессия стала недоступна, сообщите об изменении и предложите выбрать другую. Не переносите запись на вторник незаметно.

Промежуточное состояние чекбокса полезно, когда родительский пункт отражает частично выбранную группу, например несколько элементов большого списка. Это не дополнительный ответ между «да» и «нет». В примере всего два материала, поэтому «Выбрать всё» не требуется: такой элемент только усложнит простую задачу.

Опишите управление с клавиатуры

Для обычной формы паттерн радиокнопок WAI-ARIA предусматривает вход в группу и выход из неё клавишей Tab, а переход и выбор между вариантами — клавишами со стрелками. Пробел выбирает вариант в фокусе. У радиогруппы внутри панели инструментов поведение отличается; переносить это исключение в обычную форму записи не нужно.

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

В редакторе интерфейсов Pixso подготовьте компоненты радиокнопки и чекбокса: без выбора, с выбором, в фокусе и в недоступном состоянии. Разместите их в полной форме мастер-класса, чтобы оценить перенос подписей и расстояния между группами. Рядом запишите поведение: одна сессия, независимые материалы, запись оформляется только после подтверждения в предусмотренном сценарии.

Пройдите путь: выбрать вторник, сменить его на четверг, добавить оба материала и убрать один. Затем попробуйте продолжить без сессии. На каждом шаге должно быть понятно, какой ответ получился. Это и есть практическая проверка компонента: человек может выразить своё решение, изменить его и увидеть, что будет отправлено.