Dropdowns

Multi-select variant

<koala-multi-dropdown> uses the same chrome (trigger, click-outside close, Escape, aria-expanded) but the panel renders checkbox-style options that don't close it on click. Use for filter rows where the user picks multiple values.

<koala-multi-dropdown label="Status" count="@selectedCount" trigger-icon="CircleDot">
    <label class="flex items-center px-3 py-2 hover:bg-surface-dim cursor-pointer">
        <input type="checkbox" name="Status" value="New" class="w-4 h-4 mr-2 text-primary border-outline focus:ring-primary" />
        <span class="text-on-surface">New</span>
    </label>
</koala-multi-dropdown>

Form-bound (enum)

Set for to bind an enum model property. The dropdown then renders a hidden input (so server-side model binding + validation pick up the value), auto-generates its options from the enum values' [Display(Name = "…")] names, and shows a validation message. The Unknown sentinel is filtered out by default (override via exclude-values). This replaces the former <koala-enum-field> helper.

<koala-dropdown for="Input.Crm" label="CRM" placeholder="Select CRM" optional />

Bound to Input.Crm (a DemoCrm? enum). Click to see each value's [Display(Name)] label.

Sort (form-submit)

Set submit-options (an IReadOnlyList<ListSortOption>) + submit-name to turn the panel into a sort control. This is a sort control whose options submit the list filter form so the active search + filters travel with the sort — each option renders as a <button type="submit"> inside the enclosing <form method="get">, posting the submit-name query param with the option's token. Set the outer-wrapper id and list it in the form's x-target.push so the active label re-renders after the AJAX submit. Pair with variant="Chip" and trigger-icon="ArrowUpDown". Absorbs the former <koala-dropdown-sort>.

@{
    var sort = new SortDropdownModel(new[]
    {
        new ListSortOption("newest", "Newest first", IsActive: Model.Sort == "newest"),
        new ListSortOption("oldest", "Oldest first", IsActive: Model.Sort == "oldest"),
    });
}
<form method="get" x-target.push="client-results sort-dropdown">
    <koala-dropdown variant="Chip" trigger-icon="ArrowUpDown"
                    id="@sort.Id" submit-name="@sort.FieldName" submit-options="@sort.Options"
                    align="right"
                    selected-label="@(sort.Options.FirstOrDefault(o => o.IsActive)?.Label ?? "Sort")" />
</form>

Show the active sort in the trigger label. Cursor pagination resets to page 1 because ?after= is intentionally not a form field.

Chip trigger (variant)

Set variant="Chip" for a compact, inline outlined trigger that sits next to a heading or inline value — rather than the full-width, input-like default (variant="Input"). The panel still opens on click and closes on click-outside / Escape. Pair with align="right" when the chip sits at the right edge of its row so the panel doesn't overflow the viewport.

<koala-dropdown variant="Chip" selected-label="London office">
    <button type="button" koala-dropdown-option x-on:click="open = false">London office</button>
    <button type="button" koala-dropdown-option x-on:click="open = false">Bristol office</button>
</koala-dropdown>

The same child-content / items / submit-options options work in either variant.

Model-driven items (version picker)

Pass items (an IReadOnlyList<KoalaDropdownItem>) to build the menu from data instead of child markup. Each item becomes a link (carrying x-target.push for Alpine-AJAX nav); the one marked IsActive renders as a highlighted, non-link current item. This is what the quote and terms version pickers use — a Chip trigger showing the current version with the full version history in the panel.

@{
    var versionItems = Model.AllVersions
        .OrderByDescending(v => v.Version)
        .Select(v => new KoalaDropdownItem(
            $"Version {v.Version}",
            Href: ViewQuote.Route(v.Id),
            IsActive: v.Id == Model.Quote.Id))
        .ToList();
}
<koala-dropdown variant="Chip"
                selected-label="@($"Version {Model.Quote.Version}")"
                items="versionItems" />

Options stack as block links — the active version is highlighted at the top.