Radio

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

§Когда стоит применять

Как правило, Radio, как и чекбокс, не запускает действие мгновенно. Запуск действия происходит по нажатии кнопки подтверждения («Сохранить» / «Применить» / «Отправить»).

Пояснительный текст лейбла должен отвечать на вопрос «Как?» или «Какой?».

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

Radio не может применяться как элемент переключения содержимого страницы или меню. Таким функционалом обладают компоненты SegmentedRadioGroup и Tabs.

§Структура

1 – Radio-элемент, 2 – уточняющий лейбл.

Radio всегда применяется вместе с лейблом, поясняющим его значение.

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

Опционально можно оставлять переключатели в невыбранном состоянии (когда все варианты очищены).

После выбора элемента в группе пользователь не может отменить выбор, чтобы восстановить исходное состояние группы (без обновления страницы).

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

§Размеры

Доступны два размера: M и L. Размер компонента выбирается в зависимости от размера контролов на странице. Например, если на странице используются размер L для инпутов, кнопок и других элементов, то и размер Radio рекомендуется использовать соответствующий.

§Состояния

Default — когда пользователь не взаимодействует с элементом.

Hover — по наведению на элемент, включая текстовый лейбл.

Checked — выбранное состояние.

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