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-Radiobutton
Типографика S-Radiobutton
Внутренние размеры
Отступы между Label и радиокнопкой 8px независимо от размера самой RadioButton:
Отступ между группами радиокнопок зависит от выбранного размера самой радиокнопки и их расположения:
Если в группе радиокнопок есть вложенная группа, то вложенная группа выравнивается относительно линии набора основной группы:
Расположение
Если есть группа радиокнопок, элементы можно расположить вертикально или горизонтально в зависимости от варианта использования и структуры пользовательского интерфейса. Рекомендуется располагать группы радиокнопок вертикально для облегчения чтения. В списке радиокнопок, размещенных горизонтально или в несколько столбцов тяжелее ориентироваться, потому что не всегда очевидна граница группы.
Использование с инпутами
Если радиокнопки используются вместе с инпутами, они имеют размерное соответсвие.
Для полей ввода размерности L и М (Inner или Outer) соответствует размер — L, для размерности S (Outer) соответствует — S.
Правила использования размеров
L -- используется в контентной области виджета и панелях
S -- в таблицах
Значения (Value) и состояния (State)
Существует только 2 Value (значения) радиокнопки:
Unselected. Не выбрано
Selected. Выбрано
Состояния (State)
Существует 3 основных состояния радиокнопки:
Default — по умолчанию (состояние покоя). Когда пользователь не взаимодействует с радиокнопкой
Hover — при наведении курсора
Disable — неактивное (недоступное для взаимодействия)
Взаимодействие с клавиатуры
Рамка фокуса появляется при переходе клавишей Tab, если фокус стоял на другом.
Если радиокнопки располагаются вертикально, переключение фокуса производится клавишами ↓ ↑, если горизонтально — клавишами ← →.
Нажатие клавиши Enter, выбирает радиокнопку, на которой находится фокус.
Взаимодействие мышью
Состояние Focus отсутствует в компонентах для выбора и используется исключительно для разработки.
Цвета
Last updated
