Koala logo Design
Esc
No matches for “
↑↓ navigate open Esc close
Components Version picker

Version picker

Switch between revisions of a quote or terms-of-engagement without leaving the page. Single version — static chip; multiple — dropdown that swaps the target via Alpine-AJAX.

<koala-version-picker>

Canonical

Outlined chip with current version. Clicking opens an Alpine dropdown of available versions; selecting swaps the target via Alpine-AJAX (x-target.push).

Variants

2 variants
Version 1
Static chip
single version
Dropdown
multiple versions

States

2 states
Closed
Open
Click the trigger above to expand the version list.

Props

4 attributes
Attribute Type Notes
current-versionintRequired. The version number shown on the trigger chip.
versionsIReadOnlyList<VersionPickerItem>All available versions (Version, Url, IsCurrent). One item collapses to the static chip.
alignLeft, RightDefault Left. Use Right when the trigger sits at the edge of the viewport.
targetstringDefault main. The Alpine-AJAX target the version links swap.

Do & don't

Version 1
Do Use the static chip when there's only one version. Every "Version N" in the app reads as the same component.
Don't Don't show a chevron when there's nothing to pick from. The user clicks expecting a list and finds nothing.