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

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

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

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

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

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

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

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

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

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

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

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

Группа радиокнопок «Самозанятый», «ИП», «ООО» и «АО», в которой выбраны сразу две — «ИП» и «ООО»

Неправильно

Та же группа, выбрана только радиокнопка «ИП»

Правильно

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

Одиночная выбранная радиокнопка «Дублировать на почту»

Неправильно

Выбранный чекбокс «Дублировать на почту»

Правильно

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

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

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

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

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

Группа «Уведомления» с радиокнопками «Уведомлять 1 раз в неделю», «Уведомлять 1 раз в месяц» и «Уведомлять 1 раз в квартал»

Неправильно

Группа «Уведомлять один раз в» с радиокнопками «Неделю», «Месяц» и «Квартал»

Правильно

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

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

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

Группа «Система налогообложения» с названием слева: радиокнопки УСН «Доходы», УСН «Доходы — расходы» и ОСНО с серыми пояснениями про ставку налога и условия выбора, выбрана вторая

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

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

Группа «Пол» с названием слева: радиокнопки «Мужской» и «Женский» в столбец

Правильно

Группа «Пол» с названием слева: радиокнопки «Мужской» и «Женский» в строку

Правильно

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

Группа «Уведомлять один раз в»: пять радиокнопок в два столбца — «Год», «Квартал» и «Месяц» слева, «Неделю» и «День» справа

Неправильно

Та же группа: пять радиокнопок в строку с переносом — «Год», «Квартал» и «Месяц» в первой строке, «Неделю» и «День» во второй

Неправильно

Та же группа «Уведомлять один раз в» с названием слева: пять радиокнопок в один столбец

Правильно

Дизайн

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

Название группы «Пол» слева и первая радиокнопка «Мужской» стоят на одной базовой линии — она показана красной чертой

Валидация

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

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

Группа «Система налогообложения»: радиокнопки в красных рамках, под каждой серое пояснение, под группой красный текст «Выберите один из вариантов»

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

Группа «Система налогообложения» с названием слева: радиокнопки в красных рамках, над группой тултип «Выберите один из вариантов»

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

Группа «Система налогообложения» с названием сверху: радиокнопки в красных рамках, справа от названия тултип «Выберите один из вариантов»

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

Группа «Способ получения выписки»: три радиокнопки в жёлтых рамках, под группой оранжевый текст «Если ничего не выбрать, выписка не будет автоматически отправляться каждое 25-е число»

Доступность

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

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

Радиокнопки УСН «Доходы», УСН «Доходы — расходы» и ОСНО: выбранная вторая в фокусе — вокруг неё чёрная рамка

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

Те же радиокнопки: в фокусе и выбрана первая, УСН «Доходы», вокруг неё чёрная рамка

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

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

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

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