Components Dropdowns

Dropdowns

Alpine custom dropdown — trigger button (label + chevron) + panel that opens on click and closes on click.outside. Options go inside as child content using koala-dropdown-option.

<koala-dropdown>

Canonical

Use for any small, finite list of options. Options pair with x-on:click="open = false" to dismiss the panel after selection.

Variants

3 variants

Placeholder

placeholder="Select a partner"

With selection

selected-label="Acme Legal"

Form-post options

submits on click

States

3 states

Closed

Open

Click the trigger to open the panel.

Selected

Props

4 attributes

Attribute	Values	Notes
placeholder	string	Defaults to `Select…`. Shown in muted colour until a selection is made.
selected-label	string?	When present, replaces the placeholder with the current selection in default text colour.
trigger-icon	IconName	Icon inside the trigger. Defaults to `ChevronDown`; override to `Funnel` for filter dropdowns.
trigger-id	string?	Optional id on the trigger `<button>`. Set when other elements need `aria-controls` or label-for relationships.
class	string?	Extra classes appended to the wrapping `<div>`.
koala-dropdown-option	attribute on option	Applies hover + rounded styling. Pair with `x-on:click="open = false"` for non-form options to dismiss the panel.

Do & don't

Do Use a dropdown when the list fits on one screen and the user just needs to pick one. Show the current value in the trigger.

Don't Don't use a dropdown for a large unbounded set — reach for an autocomplete (typeahead) component instead.

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.

Attribute	Values	Notes
label	String	Trigger label (e.g. "Status"). Default `Filter`.
count	int?	Number of values selected — appears in the trigger as `"Status (3)"` when > 0.
trigger-icon	IconName	Default `Funnel`. Pick something more specific where it helps (CircleDot for status filters).
trigger-id	String	Optional. Useful for x-target swaps that re-render the trigger with the new count.