Радиокнопки RadioGroup

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

Радиокнопки (от англ. radiobutton) получили свое название от кнопок в старых радиоприемниках: нажатие на кнопку включало определенную частоту, остальные кнопки отскакивали вверх. Визуально такие кнопки были больше похоже на переключатель, но, почему-то среди дизайнеров такое название не прижилось.

Тем не менее при общении с пользователями мы говорим не «радиокнопка», а «переключатель», см. Глоссарий

Когда использовать

Группу радиокнопок используют, когда вариантов выбора немного — 2–5.

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

Если значений 5–25, используйте раскрывающийся список.

Если 25–50, то комбобокс со списком, а если больше 50, то без списка.

Описание работы

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

В группе радиокнопок только один пункт может быть выбран. Группа радиокнопок не может состоять из 1 пункта.

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

Выбранный по умолчанию пункт ставьте первым в списке:

Если группа радиокнопок нужна для сообщения каких-то сведений, то по умолчанию может быть не выбран ни один из пунктов:

Название группы

Название группы радиокнопок пишут с заглавной буквы и формулируют так, чтобы:

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

Название радиокнопки

Название радиокнопки пишется с заглавной буквы, и отвечает на вопрос «Как?» или «Какой?».

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

Расположение

Радиокнопки располагают в строку, только если их 2 штуки. Если больше — только в столбец. Не располагайте радиокнопки из одной группы в несколько столбцов. Группы радиокнопок смешиваются, и непонятно, к какой группе относится конкретная радиокнопка:

Работа с клавиатурой

При переходе к группе радиокнопок клавишей Tab, выбранное значение получает фокус — появляется чёрная рамка:

Если до получения фокуса ни одно значение не выбрано, фокус получает первая кнопка в списке.

Рамка фокуса появляется только при переходе табом с клавиатуры. При клике мышью рамка не появляется.

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

С переходом фокуса на новое значение в радиогруппе, значение которое в фокусе становится выбранным.

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

Валидация

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

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

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

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

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

Когда отсутствие выбора в группе радиокнопок не является ошибкой, но скорее всего пользователь пропустил этот выбор — предупреждайте пользователя об этом:

Дизайн

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

Состояния: