Pattern 25 · Complete

Search
and Filter

Narrows a collection through durable query parameters, explicit criteria, active-filter visibility, and recoverable empty results.

Functional demo

Apply related criteria together

Search projects by name or owner, narrow by status and type, then Apply. The native GET form remains meaningful without JavaScript.

4 results

    Nikba Design System

    Maya Chen

    Design systemActive

    Account settings

    Jordan Lee

    ProductIn review

    Studio identity

    Alex Morgan

    BrandDraft

    Project dashboard

    Maya Chen

    ProductActive

    Active criteria

    Keep applied filters visible

    Removable Chips expose criteria that would otherwise disappear inside closed controls.

    No results

    Keep the criteria and recovery together

    The query stays in the form while the result region becomes a compact Product State with a Reset action.

    ContextCriteria remain visible
    MessageName the collection
    RecoveryReset in one action

    Responsive behavior

    Stack without changing meaning

    The query spans the form at medium widths. All controls and actions stack into one readable column on compact screens.

    WideQuery + filters + actions
    MediumQuery / filters + actions
    CompactOne control per row

    Usage guidance

    Make every applied criterion reversible.

    Preserve the active state in URLs, Pagination, and sorting. Keep one clear Reset path whenever criteria can produce no results.

    Next pattern: Form Validation and Submission