Skip to content
v2.5.0
English
Русский
Documentation

SegmentedControl

SegmentedControl is a compound component for short, always-visible exclusive option sets, with item-level native radio inputs and an animated selected-state indicator.
StorybookSourceFigma

Overview

SegmentedControl styling is split across the root track, item-level content, and the animated indicator. The indicator follows the checked segment through CSS anchor positioning — no JS measurement.

Public CSS Variables

VariableValueAffects
Overall control height.SegmentedControl
No visible change in this state
Track background.SegmentedControl
No visible change in this state
Radius ratio of the control.SegmentedControl
No visible change in this state
Default item background on hover.SegmentedControl
No visible change in this state
Default item background while pressed.SegmentedControl
No visible change in this state
Item text color.SegmentedControlItem
No visible change in this state
Item background.SegmentedControlItem
No visible change in this state
Item background on hover.SegmentedControlItem
No visible change in this state
Item background while pressed.SegmentedControlItem
No visible change in this state
Background of the selected item.SegmentedControlItem
No visible change in this state

Edit a value to try it in the demo. Hover a variable to outline what it changes; switch the preview state to see hover, pressed, focus, disabled and invalid variables. Click a name to copy it.

Part-Level Variables

  • SegmentedControl: root track, size model, and focus outline.
  • SegmentedControlItem: label sizing, padding, and active or disabled text treatment. The active segment is the one whose radio is checked — target it with :has(input:checked).
  • SegmentedControlIndicator: animated selected-state surface.
  • SegmentedControlItemInput: semantic carrier for native radio-group behavior.

State And Variant Interaction

  • size changes height, font size, and padding model.
  • variant changes the indicator color family.
  • Disabled state affects both the item styling and the indicator appearance.

Examples

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

Do Not Override

  • Do not hard-code indicator geometry: left and width come from the checked segment's anchor.
  • Browsers without CSS anchor positioning hide the indicator and paint the checked segment's own background instead.
  • Do not weaken root focus visibility.
  • Do not force very uneven item padding if labels already vary in length.