Elastic Segmented Control
`ElasticSegmentedControl` handles compact mutually exclusive product choices such as Monthly/Yearly or Grid/List. Use radio mode for values and tab mode only when controlling panels.
Live example
Try the interaction before reading the recipe.
real component · keyboard-safe
Purpose
ElasticSegmentedControl handles compact mutually exclusive product choices such as Monthly/Yearly or Grid/List. Use radio mode for values and tab mode only when controlling panels.
Keep two to five short options and one obvious selected state. Avoid long labels, multi-select choices or duplicating primary navigation. The indicator may stretch softly but must arrive with the selection.
Arrow, Home and End keys move both focus and value; touch uses normal buttons. Reduced motion updates instantly. Keep radio/tab semantics matched to the actual relationship and never use color as the only selected signal.
Source: packages/skills/forms/elastic-segmented-control.md