Components Rocker

Rocker

A sliding segmented pill over 2–5 options. One control, two binding modes: client (each segment sets a host Alpine variable — the £/% switch in the discount / fee-band editors) and nav (each segment is an Alpine-AJAX link that pushes a query param and swaps a target — the period selector on the Conveyancing / Partner dashboards). Replaces the former koala-toggle-mode + koala-segmented-control.

<koala-rocker>

Canonical

<div x-data="{ mode: 'fixed' }">
    @{ var opts = new[] { new RockerOption("fixed", "£"), new RockerOption("percentage", "%") }; }
    <koala-rocker model="mode" options="opts" />
    <div x-show="mode === 'fixed'">…£ input…</div>
    <div x-show="mode === 'percentage'">…% input…</div>
</div>

Client mode — each segment sets the host's mode Alpine var; the surrounding form reacts (no server round-trip). Two-option rockers flip on any click.

More than two options

Client rockers take 2–5 segments. With three or more the control sizes to its labels (rather than the compact two-char £/% width), and each segment sets the model to its own key — there's no flip. A two-option rocker can opt into that same label-sized width with wide, for word labels such as Predicted / Received (give each option an explicit OnClick so a click selects rather than flips).

7d 30d 3m 12m

nav — 4 options

Left & middle are client mode (3 and 4 options); right is nav mode (the dashboard period selector, 4 options).

Nav mode

Each segment is an Alpine-AJAX link (base-url + query-param + target-id) that pushes the selected key to the URL and swaps the target — the period selector on the Conveyancing and Partner home dashboards.

7d 30d 3m 12m

<koala-rocker options="@KoalaRockerTagHelper.PeriodOptions" active-key="@Model.Period"
              base-url="@Model.Route()" target-id="home" query-param="period" />

Shapes

shape="Pill"

shape="Rounded"

Props

Attribute	Values	Notes
options	IReadOnlyList<RockerOption>	The segments (2–5). `RockerOption(Key, Label, OnClick?)`; `OnClick` overrides the client-mode click expression for side effects.
shape	Pill, Rounded	Corner style. Pill is the default.
wide	bool	Client mode: size a two-option rocker to its labels (word labels like Predicted / Received) instead of the compact £/% width. No effect on 3+ options or nav mode.
model	string	Client mode: the host Alpine variable each segment sets.
base-url	string	Nav mode: the URL each segment links to (presence of this switches to nav mode).
active-key	string	Nav mode: the currently-selected key (server-rendered).
target-id	string	Nav mode: the Alpine-AJAX target to swap. Default main.
query-param	string	Nav mode: the query param carrying the key. Default period.

Do & don't

Do Use a rocker for 2–5 mutually-exclusive options that fit on one row — mode switches, period/timeframe filters, view toggles.

Don't Don't use a rocker for more than ~5 options or long labels — it gets cramped. Reach for koala-dropdown once the set grows.