Components Toggle mode

Toggle mode

A two-option, set-to-clicked segmented mode toggle with a sliding indicator — the £/% (fixed vs percentage) switch in the discount and fee-band editors. Each segment sets the host's Alpine state to its key (clicking the active segment is a no-op), and the surrounding form reacts. This is NOT <koala-toggle> (a single on/off checkbox) nor <koala-segmented-control> (which navigates / AJAX-swaps via a URL).

<koala-toggle-mode>

Canonical

mode =

<div x-data="{ mode: 'fixed' }">
    <koala-toggle-mode model="mode" left-key="fixed" left-label="£"
                      right-key="percentage" right-label="%" />
    <div x-show="mode === 'fixed'">…£ input…</div>
    <div x-show="mode === 'percentage'">…% input…</div>
</div>

The host owns the x-data="{ mode: '…' }" and the dependent inputs; the helper renders only the shared pill chrome. Pill-shaped to match <koala-toggle> and pinned to the standard input height (h-[42px]) so it lines up with the input beside it.

Shapes

2 shapes

Pill (default)

Rounded

Side effects on switch

Each segment defaults to {model} = '{key}'. Pass left-on-click / right-on-click for a richer expression — e.g. moving the value between the two inputs before switching, so the discount form keeps a single figure as the user flips between £ and %.

<koala-toggle-mode model="mode" left-key="fixed" left-label="£"
                  right-key="percentage" right-label="%"
                  left-on-click="if (mode !== 'fixed') { $refs.fixedInput.value = $refs.pctInput.value; $refs.pctInput.value = ''; mode = 'fixed' }"
                  right-on-click="…the mirror…" />

Props

9 attributes

Attribute	Values	Notes
model	string = "mode"	Name of the host's Alpine `x-data` variable this toggle sets.
left-key	string	Value the left segment sets `model` to.
left-label	string	Left segment label (e.g. `£`).
right-key	string	Value the right segment sets `model` to.
right-label	string	Right segment label (e.g. `%`).
shape	Pill \| Rounded	Corner style. Defaults to `Pill`.
left-on-click	string?	Override Alpine expression for the left segment's click. Use for side effects.
right-on-click	string?	Override Alpine expression for the right segment's click.
class	string?	Extra classes on the wrapper.

Do & don't

Do Use it for a 2-option mode that reshapes the form around it — £ vs % amount, before/after, etc.

A mode toggle standing in for an on/off switch

Don't Don't use it for an on/off setting — reach for <koala-toggle>; or for URL-driven navigation — use <koala-segmented-control>.