Радиокнопки RadioGroup
Группа радиокнопок используется для выбора одного значения из нескольких.
Радиокнопки (от англ. radiobutton) получили свое название от кнопок в старых радиоприемниках: нажатие на кнопку включало определенную частоту, остальные кнопки отскакивали вверх. Визуально такие кнопки были больше похоже на переключатель, но, почему-то среди дизайнеров такое название не прижилось.
Тем не менее при общении с пользователями мы говорим не «радиокнопка», а «переключатель», см. Глоссарий
Когда использовать
Группу радиокнопок используют, когда вариантов выбора немного — 2–5.
Если названия вариантов короткие, вместо группы радиокнопок можно использовать переключатель, так форма будет выглядеть компактнее:
![](img/radiobutton-switcher.png)
Если значений 5–25, используйте раскрывающийся список.
Если 25–50, то комбобокс со списком, а если больше 50, то без списка.
Описание работы
Клик по названию или по самой радиокнопке приводит к ее выбору. Повторное нажатие не снимает выбор.
В группе радиокнопок только один пункт может быть выбран. Группа радиокнопок не может состоять из 1 пункта.
Если группа радиокнопок используется для настройки параметров и показывает текущее состояние системы, одна из радиокнопок всегда выбрана. Так видно, в каком состоянии система находится по умолчанию. При желании пользователь может вернуть настройку в исходное состояние.
Выбранный по умолчанию пункт ставьте первым в списке:
![](img/radiobutton-defaultselect.png)
Если группа радиокнопок нужна для сообщения каких-то сведений, то по умолчанию может быть не выбран ни один из пунктов:
![](img/radiobutton-dafaultnoselect.png)
Название группы
Название группы радиокнопок пишут с заглавной буквы и формулируют так, чтобы:
- было понятно, что можно выбрать только 1 вариант;
- названия радиокнопок в группе не содержали повторяющуюся часть.
![](img/radiobutton-wrongname.png)
![](img/radiobutton-goodname.png)
Название радиокнопки
Название радиокнопки пишется с заглавной буквы, и отвечает на вопрос «Как?» или «Какой?».
Если пользователю может быть не очевидно, что произойдет при выборе, объясните это дополнительным текстом или картинкой:
![](img/radiobutton-addtext.png)
Расположение
Радиокнопки располагают в строку, только если их 2 штуки. Если больше — только в столбец. Не располагайте радиокнопки из одной группы в несколько столбцов. Группы радиокнопок смешиваются, и непонятно, к какой группе относится конкретная радиокнопка:
![](img/radiobutton-twocolumnwrong.png)
![](img/radiobutton-twolineswrong.png)
![](img/radiobutton-lineok.png)
![](img/radiobutton-columnok.png)
Работа с клавиатурой
При переходе к группе радиокнопок клавишей Tab, выбранное значение получает фокус — появляется чёрная рамка:
![](img/radiobutton-focus.png)
Если до получения фокуса ни одно значение не выбрано, фокус получает первая кнопка в списке.
Рамка фокуса появляется только при переходе табом с клавиатуры. При клике мышью рамка не появляется.
Если радиокнопки располагаются вертикально, переключение фокуса производится клавишами ↓ ↑, если горизонтально — клавишами ← →:
С переходом фокуса на новое значение в радиогруппе, значение которое в фокусе становится выбранным.
Следующее нажатие клавиши Tab переводит фокус на следющий контрол.
Валидация
Варианты, которые нельзя выбрать в списке радиокнопок, должны быть заблокированы. Валидация может быть только в том случае, если обязательно выбрать хотя бы один вариант.
Если заголовок группы находится слева, текст валидации располагайте под группой радиокнопок.
![](img/radiobutton-intextvalidation1.png)
Если заголовок группы находится над группой радиокнопок, текст ошибки располагайте сразу под заголовком группы:
![](img/radiobutton-intextvalidation2.png)
Если для валидации вы используете тултипы, поведение подсказок будет иным. Тултип отображается при наведении на группу радиокнопок. Если заголовок группы расположен слева — выводите тултип сверху.
![](img/radiobutton-tooltipvalidation1.png)
Если заголовок сверху, выводите тултип справа.
![](img/radiobutton-tooltipvalidation2.png)
Когда отсутствие выбора в группе радиокнопок не является ошибкой, но скорее всего пользователь пропустил этот выбор — предупреждайте пользователя об этом:
![](img/radiobutton-warning.png)
Дизайн
Название группы выравнивайте по базовой линии первого пункта:
![](img/radiobutton-alignment.png)
Состояния:
![](img/radiobutton-state-default.png)
![](img/radiobutton-state-selected.png)
![](img/radiobutton-state-focus.png)
![](img/radiobutton-state-disabled.png)
![](img/radiobutton-state-selecteddisabled.png)
![](img/radiobutton-state-error.png)
![](img/radiobutton-state-warning.png)