Components List filter modals

List filter modals

Inline dropdown row on desktop, full-screen modal on mobile. The shared tag helper handles the responsive collapse, the backdrop, the close button, and the sticky "Apply filters" footer.

<koala-list-filters>

Canonical

Search input plus filter triggers in one row. Above the breakpoint, the dropdowns sit inline; below it, they collapse behind a funnel button that opens a full-screen modal.

Variants

2 variants

Medium — 1 to 2 dropdowns

breakpoint="Medium"

Large — 3+ dropdowns

breakpoint="Large"

States

3 states

Desktop inline

Mobile collapsed

Filters

Mobile open

Props

1 attribute

Attribute	Values	Notes
breakpoint	Medium, Large	Breakpoint at which the row goes inline. Default Medium (768px); use Large when 3+ dropdowns need more space.
filtersOpen	Alpine boolean	The parent form's `x-data` must declare this; the mobile trigger flips it.

Do & don't

Do Wrap the dropdowns in <koala-list-filters>. Each checkbox auto-submits via $el.form.requestSubmit().

Don't Don't nest a second form inside the list filter row. It breaks auto-submit and forces a manual Apply step.