Components Segmented control

Segmented control

Generic segmented pill control with a sliding active thumb. Use for any 2–5 option group where a horizontal segmented control reads better than a dropdown — period filters, timeframe pickers, view-mode toggles.

<koala-segmented-control>

Canonical — period filter

7d 30d 3m 12m

<koala-segmented-control options="Model.PeriodOptions" active-key="@Model.Period" base-url="/dashboard" target-id="main" query-param="period" />

Three options — view switcher

List Grid Map

<koala-segmented-control options="Model.ViewOptions" active-key="@Model.View" base-url="/properties" target-id="main" query-param="view" />

Two options — yes / no

Yes No

For yes/no questions inside forms (with model binding), prefer <koala-radio-yes-no> — segmented-control is a navigation control, not a form field.

Props

Attribute	Values	Notes
options	IReadOnlyList<SliderOption>	Required. Each option is a `(Key, Label)` pair.
active-key	String	Required. Must match one option's `Key`; the helper throws otherwise.
base-url	URL	Each option link appends `?{query-param}={key}`.
target-id	String	Alpine-AJAX swap target. Default `main`.
query-param	String	URL parameter name. Default `period`.

Do & don't

3 options — a real segmented control

Do Use slider select for 2–4 mutually-exclusive options where every value is short enough to read at a glance.

7 options stretched across the bar with text overflowing

Don't Don't reach for slider select when the option count or label length doesn't fit. Use <koala-dropdown> or a regular <koala-tabs> instead.