Radio

Radio — контрол выбора одного варианта из взаимоисключающих, у которых общий name.

Обзор

Стили Radio задаются небольшим набором переменных на уровне input: размер, цвет границы и обводка фокуса. Он ближе к нативному input, чем более компонуемые чекбоксы и переключатели.

Публичные CSS-переменные

MonthlyYearly

Переменная	Значение	Влияет на
Визуальный размер контрола.`Radio`		В этом состоянии изменений не видно
Текущий цвет границы.`Radio`		В этом состоянии изменений не видно
Цвет обводки фокуса.`Radio`		В этом состоянии изменений не видно
Длительность перехода между состояниями.`Radio`		В этом состоянии изменений не видно
Цвет рамки при наведении.`Radio`		В этом состоянии изменений не видно
Цвет рамки при нажатии.`Radio`		В этом состоянии изменений не видно

Измените значение, чтобы примерить его в демо. Наведите на переменную, чтобы обвести то, что она меняет; переключите состояние превью, чтобы увидеть переменные наведения, нажатия, фокуса, отключённого состояния и ошибки. Клик по имени копирует его.

Переменные уровня частей

Radio: отвечает за весь внешний вид как один стилизованный нативный input.

Взаимодействие состояний и вариантов

size соответствует разным токенам отступов.
variant меняет семейство цветов отмеченного состояния.
Отключённое состояние меняет фон и оформление отметки вместе.

Примеры

.brandRadio {
  --focus-color: var(--fills-primary);
}

.compactRadio {
  --radio-size: 14px;
}

Не переопределяйте

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