RadioButton

Общая информация

Радиокнопка (от англ. radiobutton) - атомарный элемент графического пользовательского интерфейса, позволяющий пользователю выбрать один элемент или параметр из нескольких вариантов.

Способы использования

В основном радиокнопка не используется сама по себе, поэтому к ней добавляется Label.

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

Для повышения доступности клика в качестве интерактивной задается область радиокнопки (включающая радиокнопку + Label).

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

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

Группа радиокнопок не может состоять из 1 пункта.

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

Так видно, в каком состоянии система находится по умолчанию. Выбранный по умолчанию пункт ставьте первым в списке:

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

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

Используйте радиокнопки, когда у вас есть группа взаимоисключающих вариантов, и разрешен только один выбор из группы.

Группу радиокнопок используют, когда вариантов выбора немного — 2–5
Если названия вариантов короткие, вместо группы радикнопок можно использовать Button switcher, так форма будет выглядеть компактнее.
Если значений 5–25, используйте раскрывающийся список.
Если 25–50, используйте комбобокс со списком, а если больше 50, то можно использовать модальное окно

Варианты использования

В основном RadioButton используется в:

формах
настройках
списках с выбором

Формы

В формах на всю страницу, модальных окнах, SideMenu или любых виджетах.

Настройки

Для выбора одного из набора параметров в меню, на странице или в компоненте.

Выбор в списках

Для выбора одного из набора элементов в таблицах данных или списках.

Оформление

Контент (Label)

Label радиокнопки пишется с заглавной буквы.

Переполнение контента

Мы рекомендуем:

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

В случае необходимости переноса радиокнопка и Label должны быть выровнены по верхнему краю.

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

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

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

Размеры

Внешние размеры

В нашей дизайн-системе существует 2 размера радиокнопок — L — 2020px и S — 1616px.

Радиокнопки размера S используется в таблицах и с интпутами Outer размера S , во всех других случаях используется радиокнопки размера L.

Элемент

Значение L

Значение S

RadioButton

20px * 20px

Icon: 10px * 10px

Border: 1px (solid) (default/hover; unselected)

Border-radius: 100px (default/hover; unselected)

Focus border: 2px

Focus border-radius: 100px

16px * 16px

Icon: 8px * 8px

Border: 1px (solid) (default/hover; unselected)

Border-radius: 100px (default/hover; unselected)

Focus border: 2px

Focus border-radius: 100px

Типографика L-Radiobutton

Элемент

Название стиля

Гарнитура

Кегль

Начертание

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

.Input/label

Inter

12px

Semi Bold

Label

Main/Body-text 14

Inter

14px

Regular

Типографика S-Radiobutton

Элемент

Название стиля

Гарнитура

Кегль

Начертание

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

.Input/label

Inter

12px

Semi Bold

Label

Main/Body-text 12

Inter

12px

Regular

Внутренние размеры

Отступы между Label и радиокнопкой 8px независимо от размера самой RadioButton:

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

Если в группе радиокнопок есть вложенная группа, то вложенная группа выравнивается относительно линии набора основной группы:

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

Если есть группа радиокнопок, элементы можно расположить вертикально или горизонтально в зависимости от варианта использования и структуры пользовательского интерфейса. Рекомендуется располагать группы радиокнопок вертикально для облегчения чтения. В списке радиокнопок, размещенных горизонтально или в несколько столбцов тяжелее ориентироваться, потому что не всегда очевидна граница группы.

Использование с инпутами

Если радиокнопки используются вместе с инпутами, они имеют размерное соответсвие.

Для полей ввода размерности L и М (Inner или Outer) соответствует размер — L, для размерности S (Outer) соответствует — S.

Правила использования размеров

L -- используется в контентной области виджета и панелях

S -- в таблицах

Значения (Value) и состояния (State)

Существует только 2 Value (значения) радиокнопки:

Unselected. Не выбрано
Selected. Выбрано

Состояния (State)

Существует 3 основных состояния радиокнопки:

Default — по умолчанию (состояние покоя). Когда пользователь не взаимодействует с радиокнопкой
Hover — при наведении курсора
Disable — неактивное (недоступное для взаимодействия)