Components Switchers

Switchers

A trigger + dropdown for switching context — organisation (conveyancing), partner, or branch (partner area). The current item drives the trigger; the dropdown lists every option (shown even when there is only one) and each row posts to a switch endpoint. Closes on click-outside or Escape.

Canonical

@{
    var orgItems = Model.Organisations.Select(o => new ContextSwitcherItem
    {
        Name = o.Name,
        IsCurrent = o.Id == Model.CurrentOrganisationId,
        Icon = IconName.Building,
        Fields = new Dictionary<string, string> { ["organisationId"] = o.Id.ToString() },
    }).ToList();
}
<koala-context-switcher label="Organisation"
                        post-url="/conveyancing/switch"
                        search-placeholder="Search organisations..."
                        empty-label="No organisations found"
                        items="orgItems" />

The card variant (set a label). The trigger shows the current item; clicking opens the dropdown of all options. Drop the label for the compact button variant used in a top bar.

Compact button variant — omit label for the trigger used in a right-aligned top bar.

<koala-context-switcher post-url="/conveyancing/switch"
                        align="right"
                        items="orgItems" />

Props

7 inputs

Attribute	Type	Notes
items	IReadOnlyList<ContextSwitcherItem>	Each row's name, current state, hidden form fields, and avatar (Organisation / Partner / Icon). The current item drives the trigger.
label	string?	Set it for the card trigger (eyebrow over the current name). Omit it for the compact button trigger.
post-url	string	Form action each row posts to (e.g. `/conveyancing/switch`).
align	left \| right	Which edge the dropdown aligns to. Use `right` in a right-aligned top bar.
collapse-state	string?	Alpine expression (e.g. `sidebarCollapsed`); when truthy the trigger shows the avatar only.
search-placeholder / empty-label	string	Search field placeholder and no-results message. Search appears once the list is long.

Do & don't

Do Render the switcher even when there's a single option, so users learn the control can hold more. Reuse one component for org, partner, and branch — just change the items and post URL.

Don't Don't trap context switching behind a full-screen modal. A dropdown dismisses on click-outside or Escape and keeps the user in place.