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
AIFree

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.

6 states5 edge casesDesktop + Mobile

01The problem

Many AI features don't need a chat: they need to fill in a category, propose a reply, complete a sentence or suggest an assignee. Inline suggestions can save time across every form, but if they're hard to tell apart from user input, accepted by accident, or interrupt typing, users stop trusting the whole product.

02When to use

Use when

  • Fields with predictable values: categories, tags, assignees, due dates
  • Writing surfaces: replies, descriptions, commit messages
  • Next-step suggestions after an action (“Create follow-up task?”)

Avoid when

  • The value has legal or financial consequences and needs deliberate entry.
  • Suggestion quality is low — a bad suggestion is worse than none.

03Recommended UX

Statecraft recommendation

Show suggestions in a visually distinct style that can't be mistaken for user input — ghost text, a dotted outline or an AI marker — accept with one explicit action (Tab or a button), dismiss by simply continuing, and never overwrite anything the user has typed.

Distinct styling prevents the most damaging failure: a user submitting an AI value they never actually read.

Accept must be deliberate; ignore must be free. If dismissing costs effort, suggestions feel like nagging.

Users' own input always wins. A suggestion that replaces typed text breaks trust immediately.

04Interaction flow

  1. 01

    User reaches field

    Suggestion computed from context.

  2. 02

    Suggestion shown

    Ghost text or chip with AI marker.

  3. 03

    Accept or ignore

    Tab / click accepts; typing dismisses.

  4. 04

    Accepted value

    Becomes normal input, editable; marked as suggested in history.

  5. Result

    • Accepted
    • Edited
    • Ignored

05Desktop behaviour

On desktop, completions appear as ghost text and field suggestions as a small chip beside the field.

Desktop rules

  • Ghost text in a lighter colour after the cursor; Tab accepts, Esc or typing dismisses.
  • Field suggestions as a chip: “✦ Suggested: Travel · Accept”.
  • Show a short reason on hover where useful: “Based on 12 similar expenses”.
  • Never auto-fill required fields silently on load.
Suggestions look different from user input, accept with one deliberate action, and disappear when the user keeps typing.

06Mobile behaviour

There's no Tab key on mobile. Suggestions become tappable chips above the keyboard or beside the field.

Mobile rules

  • Suggested values as tappable chips under the field.
  • Completions as a chip above the keyboard: “✦ …and I’ll send it by Friday”.
  • Keep suggestions to one or two; more becomes a menu users have to read.
No Tab key on phones: suggestions become tappable chips under the field and above the keyboard.

07States

  • No suggestion

    Field behaves normally.

  • Loading

    No spinner in the field; suggestion simply appears when ready.

  • Suggested

    Distinct style with AI marker and accept action.

  • Accepted

    Becomes normal input; can be edited.

  • Dismissed

    Hidden for this field until context changes.

  • Low confidence

    Not shown — or shown as options rather than a single answer.

08Edge cases

  1. EC-01

    Suggestion arrives while typing

    The user has started typing when the suggestion returns.

    Recommendation

    Only show it if it still matches what they've typed; otherwise discard it.

  2. EC-02

    Bulk acceptance

    An import shows AI-suggested categories for 300 rows.

    Recommendation

    Allow “Accept all” per column, with low-confidence suggestions excluded and highlighted for review.

  3. EC-03

    Wrong suggestion accepted

    The user tabs through and accepts a wrong category.

    Recommendation

    Mark AI-filled fields in the record history and keep Undo available until save.

  4. EC-04

    Repeatedly ignored suggestions

    A user dismisses suggestions in a field every time.

    Recommendation

    Back off for that field and let users turn suggestions off per field type.

  5. EC-05

    Latency

    Completions take 1.5 s to arrive.

    Recommendation

    Show nothing until ready and cancel requests on further typing. A late suggestion is noise.

09Microcopy

  • Field chip

    Avoid

    “AI says: Travel”

    Prefer

    “✦ Suggested: Travel · Accept”

  • Reason

    Prefer

    “Based on 12 similar expenses from this vendor”

  • Bulk

    Prefer

    “Accept 284 suggestions · 16 need review”

  • Setting

    Prefer

    “Suggest categories automatically”

10Accessibility

  • Ghost text is announced as a suggestion (e.g. via aria-describedby) and is never part of the input's value until accepted.
  • Accept is available via a labelled button as well as Tab.
  • The AI marker has a text alternative: “AI suggestion”.

11Developer notes

  1. 01

    Request suggestions with debouncing and cancellation; ignore stale responses.

  2. 02

    Store whether a value was suggested, accepted or edited for quality measurement.

  3. 03

    Set confidence thresholds per field; below them, show nothing.

  4. 04

    Cache suggestions per record and context to avoid repeated calls.

12Implementation prompt

For Claude Code, Codex or Cursor

Implement inline AI suggestions.

Requirements:
- Field suggestions as a distinct chip ("✦ Suggested: Travel · Accept") with optional reason on hover.
- Text completions as ghost text after the cursor: Tab accepts, Esc/typing dismisses; never part of the value until accepted.
- Never overwrite user input; drop suggestions that no longer match what's typed.
- Debounced requests with cancellation; nothing shown until ready.
- Confidence thresholds per field; low confidence hidden or shown as options.
- Bulk accept per column with low-confidence items excluded.
- Track suggested/accepted/edited per field; mark AI-filled fields in history.
- Per-field setting to turn suggestions off; back off after repeated dismissals.
- Accessibility: announced suggestions, labelled accept button, text alternative for AI marker.
- Mobile: tappable chips under fields and above the keyboard.

Do not redesign the existing interface.