SegmentedControl

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

Storybook Исходники Figma

Обзор

Стили SegmentedControl разделены между дорожкой корня, содержимым элементов и анимированным индикатором. Индикатор следует за отмеченным сегментом через CSS anchor positioning — без измерений в JS.

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

DayWeekMonth

Переменная	Значение	Влияет на
Общая высота контрола.`SegmentedControl`		В этом состоянии изменений не видно
Фон дорожки.`SegmentedControl`		В этом состоянии изменений не видно
Коэффициент радиуса контрола.`SegmentedControl`		В этом состоянии изменений не видно
Фон элемента по умолчанию при наведении.`SegmentedControl`		В этом состоянии изменений не видно
Фон элемента по умолчанию при нажатии.`SegmentedControl`		В этом состоянии изменений не видно
Цвет текста элемента.`SegmentedControlItem`		В этом состоянии изменений не видно
Фон элемента.`SegmentedControlItem`		В этом состоянии изменений не видно
Фон элемента при наведении.`SegmentedControlItem`		В этом состоянии изменений не видно
Фон элемента при нажатии.`SegmentedControlItem`		В этом состоянии изменений не видно
Фон выбранного элемента.`SegmentedControlItem`		В этом состоянии изменений не видно

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

Переменные частей

SegmentedControl: дорожка корня, модель размеров и контур фокуса.
SegmentedControlItem: размеры подписи, внутренние отступы и оформление текста в активном или отключённом состоянии. Активный сегмент — тот, чья радиокнопка отмечена; выбирайте его через :has(input:checked).
SegmentedControlIndicator: анимированная поверхность выбранного состояния.
SegmentedControlItemInput: семантический носитель нативного поведения группы радиокнопок.

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

size меняет высоту, размер шрифта и модель внутренних отступов.
variant меняет цветовое семейство индикатора.
Отключённое состояние влияет и на стили элементов, и на вид индикатора.

Примеры

.compactSegments {
  --segmented-control-height: 32px;
}

.brandSegments {
  --segmented-control-background-color: var(--fills-secondary);
}

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

Не задавайте геометрию индикатора жёстко: left и width берутся из якоря отмеченного сегмента.
Браузеры без поддержки CSS anchor positioning скрывают индикатор и вместо этого закрашивают фон самого отмеченного сегмента.
Не ослабляйте видимость фокуса корня.
Не навязывайте сильно неравные внутренние отступы элементов, если подписи и так различаются по длине.