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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Нажатие клавиши Enter, выбирает радиокнопку, на которой находится фокус.

Валидация

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

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

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

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

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

Когда радиокнопка получает фокус, синяя рамка появляется у одной радиокнопки, у остальных пропадает красная рамка:

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

Дизайн

Выбранная радиокнопка обозначается символом  из шрифта Kontur Iconic.

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

Расстояние между пунктами больше межстрочного расстояния на 10 px. Если в группе есть вложенная группа, то от ее последнего элемента до следующего элемента первого уровня нужно увеличить отступ до 20 px:

Состояния: