Design System

Segmented track

The large, equal-width option track with a sliding indicator — the marketing-weight sibling of Segmented control. That one is compact 32/36px chrome for view switches; this is a full-width, tappable control for a choice that drives the content beside it — billing term, dose, pack size. Every segment is the same width, and the active one is marked by a raised thumb that slides between positions.

It is a radio group, not a tablist. The PDP markup this was promoted out of used role="tablist" with role="tab" children and no tabpanel or aria-controls — tabs promise panels this widget does not have — and it shipped with no keyboard support at all: every segment sat in the tab order and arrow keys did nothing. Radio semantics are the accurate description of "pick one, the content updates in place", and they bring the expected keys.

Arrow keys (either axis) move and select, Home/End jump to the ends, and a roving tabindex keeps the whole group to a single tab stop. Controlled and uncontrolled, mirroring Tabs.

import from @halwel/ui/components/product/SegmentedTrack

Variants

Four terms — controlled (the GLP-1 PDP)

selected: 3 mo

Three segments — uncontrolled, defaults to the first
Two segments — defaultValue on the second
Keyboard — tab in once, then arrow between segments

single tab stop · arrows select · Home/End jump

Off the storefront ground — carries its own contrast

no .product-page wrapper, no --pdp-* tokens in scope