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

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

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

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

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

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

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

Если больше 25 — комбобокс.

Если названия вариантов короткие, вместо группы радиокнопок подойдёт переключатель — форма станет компактнее.

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

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

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

Неправильно

Правильно

Группа радиокнопок не может состоять из одного пункта. Если вариант один, используйте тогл или чекбокс.

Неправильно

Правильно

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

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

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

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

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

Неправильно

Правильно

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

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

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

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

Располагайте радиокнопки в строку, только если их две. Если больше — только в столбец.

Правильно

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

Неправильно

Правильно

Управление клавиатурой

При переходе к группе радиокнопок клавишей Tab фокус получает выбранное значение.

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

Фокусная рамка появляется только при переходе клавишей Tab. При наведении курсора или клике мышью она не появляется.

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

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

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

Валидация

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

Текст валидации располагайте под группой радиокнопок.

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

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

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

Дизайн

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