Skip to content
Statecraft

All patterns

  • Bulk Actions

    Let users perform one action across many records safely, with clear scope, eligibility and recovery.

    Data

  • Advanced Filters

    Help users narrow large datasets with filters they can see, edit, share and recover from.

    Data

  • Autosave

    Save changes continuously without a Save button, while keeping users certain their work is safe.

    Forms

  • Approval Workflow

    Route a request through one or more reviewers with clear status, accountability and an auditable history.

    Workflow

  • AI Response

    Present generated answers with streaming, sources, control and recovery, so users can trust and verify them.

    AI

  • File Upload

    Let users add files with visible progress, early validation and recovery that never loses what already uploaded.

    Files

  • Command Palette

    Give users one keyboard-first entry point to jump anywhere and run any action without hunting through menus.

    Navigation

  • Subscription Management

    Let customers upgrade, downgrade, change billing cycles and cancel with exact prices, dates and consequences shown before they confirm.

    Payments

  • Refunds

    Let support staff or customers return money with the exact amount, destination, timing and consequences stated before it's irreversible.

    Payments

  • Checkout

    Take a customer from plan choice to paid with the fewest fields, a total that never surprises, and errors that keep what they typed.

    Payments

  • Failed Payment Recovery

    Recover failed renewals with timely, specific prompts and a grace period, before customers lose access they still want.

    Payments

  • Usage & Limits

    Show customers how much of their plan they've used and handle the moment they hit a limit without breaking their work.

    Payments

  • App Sidebar

    Organise a product's main navigation so users always know where they are, reach frequent places in one click, and keep their place on small screens.

    Navigation

  • Tabs

    Split one object's content into peer views that users switch between without losing their place, state or URL.

    Navigation

  • Breadcrumbs & Back

    Show users where they are in a hierarchy and get them back to exactly where they came from — filters, scroll and all.

    Navigation

  • File Preview

    Let users look inside a file without downloading it, with a predictable fallback for every type the product can't render.

    Files

  • Attachments

    Attach files to records and comments with clear ownership, visibility and deletion rules that match the record they belong to.

    Files

  • CSV Import

    Bring spreadsheet data into the product with column mapping, row-level validation and a preview, so nothing is imported by surprise.

    Files

  • Confirmation

    Ask for confirmation only when an action is hard to undo, and make the dialog state exactly what will happen.

    Workflow

  • Partial Failure

    Report operations where some items succeed and some fail, so users know exactly what happened and what to do about the rest.

    Workflow

  • Permissions

    Show people what they can do, explain what they can't, and give them a way forward instead of a dead end.

    Workflow

  • Notifications

    Tell people about things that need them, in the right channel and at the right volume, without burying what matters.

    Workflow

  • Activity History

    Show who changed what and when on a record, in a timeline people can scan, filter and trust.

    Data

  • Empty States

    Design what users see when there's nothing to show, so every empty screen explains why and offers the next useful step.

    Data

  • Version History

    Let users see earlier versions of a document or record, compare them, and restore safely without losing current work.

    Forms

  • Human Review

    Put a person between AI output and real-world consequences, with review that's fast for good output and careful for risky output.

    AI

  • Feedback

    Collect quick, specific feedback on AI output that users actually give, and that the team can actually use.

    AI

  • Inline Validation

    Tell users about input problems at the right moment — not while they're still typing, and not only after they submit.

    Forms

  • Unsaved Changes

    Protect work in forms that save explicitly, warning only when something would actually be lost.

    Forms

  • Offline Mode

    Keep users working when the connection drops, with an honest view of what's synced, what's pending and what can't be done offline.

    Forms

  • Search

    Help users find records by what they remember — a name, a number, a phrase — with results that explain why they matched.

    Data

  • Pagination

    Split long lists into pages or progressive loads in a way that keeps position, counts and selection predictable.

    Data

  • Saved Views

    Let users save a combination of filters, sorting and columns as a named view they and their team can return to.

    Data

  • Comments

    Let people discuss work where it happens — on the record or the exact part of it — with mentions, threads and resolution.

    Workflow

  • Error Recovery

    When something fails, say what happened in plain language, protect the user's work, and offer the most useful next step.

    Workflow

  • Keyboard Shortcuts

    Give frequent users fast keyboard paths that are discoverable, consistent and never get in the way of typing.

    Navigation

  • Prompt Input

    Design the box where users ask AI for things — with context, attachments and controls visible — so prompts start strong and never get lost.

    AI

  • AI Suggestions

    Offer AI-generated values, completions and next steps inline, so users accept good ones in one action and ignore the rest at no cost.

    AI

  • Agent Progress

    Show what an AI agent is doing during long, multi-step tasks — steps, tool use and decisions — so users can follow, steer and stop it.

    AI

  • AI Onboarding

    Introduce an AI feature by showing what it can do with the user's own data, setting honest expectations about limits and privacy.

    AI

  • Export

    Let users take their data out in the format they need, with a clear scope and no surprises about what's included.

    Files

  • Sharing & Links

    Let people share files and records with teammates or outsiders, with access levels and link scope that are impossible to misread.

    Files

  • Storage Limits

    Show how much storage is used and by what, and handle a full quota without blocking work or deleting anything.

    Files
DataFree

Search

Help users find records by what they remember — a name, a number, a phrase — with results that explain why they matched.

5 states5 edge casesDesktop + Mobile

01The problem

Users remember fragments: part of a customer name, an invoice number, a phrase from a comment. If search only matches exact titles, misses typos, or returns a flat list without context, users give up and browse manually. Search also has to coexist with filters without confusing users about which one is narrowing the results.

02When to use

Use when

  • Products with more records than users can browse
  • Lists where users look up specific items by name or number
  • Content-heavy products: docs, tickets, conversations

Avoid when

  • Small, stable lists — browsing is faster.
  • Navigation between product areas — use a command palette.

03Recommended UX

Statecraft recommendation

Put search where the results will appear, match on everything users might remember (names, numbers, emails, content) with typo tolerance, and show why each result matched by highlighting the matching text. Keep the query in the URL and combine it visibly with any active filters.

Search in the list toolbar makes scope obvious: it searches this list, with these filters.

Highlighted matches let users verify results without opening them — especially when the match is in a secondary field like an email.

Queries in the URL make results shareable and survive Back.

04Interaction flow

  1. 01

    Focus search

    Recent searches shown when empty.

  2. 02

    Type

    Results update after a short debounce.

  3. 03

    Scan results

    Matches highlighted; secondary match fields shown.

  4. 04

    Refine

    Combine with filters or scope.

  5. Result

    • Opened result
    • No results
    • Refined

05Desktop behaviour

On desktop, search lives in the list toolbar. Results replace the list in place and keep the same row layout.

Desktop rules

  • Shortcut “/” focuses the search field.
  • Debounce ~200 ms; keep previous results visible while loading.
  • Highlight matches in titles and show the matching secondary field: “Matched email: dana@lumen.de”.
  • Show query and filters together: “12 results for ‘acme’ in Overdue invoices”.
Search lives with the list it searches, combines visibly with filters, and highlights why each row matched.

06Mobile behaviour

On mobile, search opens a focused full-screen view with recent searches, then shows results as compact rows.

Mobile rules

  • Tap search to open a full-screen view with the keyboard up.
  • Recent searches and suggestions before typing.
  • Results as compact rows with highlighted matches; Cancel returns to the list.
A focused full-screen search with recent searches before typing.

07States

  • Empty focus

    Recent searches and suggestions.

  • Typing

    Debounced; previous results dimmed while loading.

  • Results

    Count, highlighted matches, match reason.

  • No results

    Names the query and filters; offers to search everywhere.

  • Error

    Search failed; Retry; query kept.

08Edge cases

  1. EC-01

    Typos

    The user types “Stark Industires”.

    Recommendation

    Use fuzzy matching and show “Showing results for Stark Industries”.

  2. EC-02

    Exact identifiers

    The user pastes “INV-1024”.

    Recommendation

    Detect ID-shaped queries and put the exact match first — or jump straight to it.

  3. EC-03

    Search plus filters return nothing

    “acme” finds nothing in Paid invoices but 4 in Overdue.

    Recommendation

    Say so: “No results in Paid. 4 results in all invoices.”

  4. EC-04

    Results the user can't open

    A match is in a private project.

    Recommendation

    Exclude it from results entirely; search must respect permissions.

  5. EC-05

    Stale responses

    A slow response for “ac” arrives after the one for “acme”.

    Recommendation

    Cancel or ignore out-of-date requests.

09Microcopy

  • Placeholder

    Avoid

    “Search…”

    Prefer

    “Search by name, number or email”

  • Result count

    Prefer

    “12 results for “acme” in Overdue invoices”

  • Typo

    Prefer

    “Showing results for Stark Industries”

  • No results

    Avoid

    “No matches”

    Prefer

    “No results in Paid. 4 results in all invoices.”

10Accessibility

  • Search input has a visible or accessible label and role="search" on its container.
  • Announce result counts politely after typing pauses.
  • Highlights use <mark>, which carries meaning beyond colour.

11Developer notes

  1. 01

    Use a search index with typo tolerance and per-field weighting (title > identifier > secondary fields > content).

  2. 02

    Apply permissions inside the search query, not by filtering after retrieval.

  3. 03

    Return highlight ranges from the server.

  4. 04

    Keep the query in the URL alongside filters.

12Implementation prompt

For Claude Code, Codex or Cursor

Implement search for the existing list views.

Requirements:
- Search field in the list toolbar (role="search", labelled), "/" shortcut.
- Debounced queries (~200 ms); cancel stale requests; keep previous results dimmed while loading.
- Indexed search with typo tolerance and field weighting; exact ID matches first.
- Permissions applied in the query.
- Highlighted matches (<mark>) with secondary match field shown.
- Count with scope: "12 results for 'acme' in Overdue invoices".
- No-results state suggests broader scope with counts.
- Query in URL with filters; recent searches on empty focus.
- Mobile: full-screen search with recents; compact result rows.

Do not redesign the existing interface.