Koala logo Design
Esc
No matches for “
↑↓ navigate open Esc close
Components Filter popovers

Filter popovers

Compact pill trigger that opens an Alpine popover with the filter controls inside. Auto-applies on every change — the popover state is the server state.

filter popover pattern

Canonical

Status

Pill trigger with the active count in parens. Click toggles the panel; every change submits and the panel state is preserved across swaps via a popoverOpen hidden input.

Variants

3 variants
No active filters
2 picked
Many picked

States

2 states
Closed
Status
Active
Pending
Archived
Open

Props

3 hidden inputs
Query param Type Notes
popoverOpenboolHidden input carries true while open so AJAX swaps preserve the panel state.
IncludeXbool per audienceSeparate booleans per audience — not a [Flags] enum — so each posts cleanly with a hidden false shadow.
UserIdsGuid[]When specific entities are picked, audience checkboxes are dimmed and ignored.

Do & don't

Do Auto-apply on every change. The popover state IS the server state — no draft, no Apply on desktop.
Don't Don't put Cancel / Apply at the foot. Adds a step, leaves users wondering whether the change has applied yet.