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

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.

7 states5 edge casesDesktop + Mobile

01The problem

The prompt box is the first thing users touch in an AI feature, and usually the least designed: a single-line field with a send arrow. Users don't know what the AI can see, what it's good at, or how to give it a file. Long prompts get cramped, Enter sends half-written thoughts, and a failed request throws away what they typed.

02When to use

Use when

  • Chat assistants and copilots
  • AI features that take a natural-language instruction: generate, summarise, transform
  • Search experiences that answer questions

Avoid when

  • The task has a small set of known options — buttons or a form are faster than typing.
  • The AI acts on a selection with a fixed operation (Summarise this) — use a menu action.

03Recommended UX

Statecraft recommendation

Use an auto-growing multi-line input that shows the context the AI will use (the current document, selected records, attached files) as removable chips above the text, keeps the typed prompt until a response succeeds, and offers 3–4 starter prompts specific to where the user is.

Context chips answer the silent question “what can it see?”, and let users remove context that would mislead the answer.

Auto-growing input makes long, specific prompts comfortable — and specific prompts produce better results.

Starter prompts tied to the current page teach capability far better than generic examples like “Write a poem”.

04Interaction flow

  1. 01

    Focus input

    Starter prompts and current context shown.

  2. 02

    Add context

    Attach files, mention records with @, or use the selection.

  3. 03

    Write prompt

    Input grows; Shift+Enter for new lines.

  4. 04

    Submit

    Enter or button; prompt moves into the conversation.

  5. Result

    • Response
    • Error — prompt restored
    • Stopped

05Desktop behaviour

On desktop, the composer sits at the bottom of the conversation or panel, with context chips above the text and controls in a footer row.

Desktop rules

  • Enter sends, Shift+Enter adds a line; show the hint once, quietly.
  • Context chips above the text: “Q4 pricing page”, “3 selected invoices”, attached files.
  • Footer row: attach, @ mention, model or mode selector if relevant, Send.
  • Grow to ~8 lines, then scroll inside the input.
Context the AI will use is shown as removable chips, starter prompts fit the page, and the input grows for longer prompts.

06Mobile behaviour

On mobile, the composer sits above the keyboard. Keep controls minimal and make attachments one tap.

Mobile rules

  • Return inserts a new line on mobile; a visible Send button submits.
  • Collapse context chips to a single “2 items” chip that expands.
  • Attach menu offers camera, photos and files.
  • Grow up to ~5 lines before scrolling.
Above the keyboard: collapsed context, one-tap attachments, Return for new lines and a separate Send.

07States

  • Empty

    Placeholder states what the AI can help with here; starter prompts visible.

  • Typing

    Send enabled; input grows.

  • With context

    Chips show attached files, selections and mentioned records.

  • Uploading attachment

    Chip shows progress; Send waits or warns.

  • Submitted

    Input clears; Stop available while generating.

  • Failed

    Prompt restored into the input with the error and Retry.

  • Limit reached

    Input disabled with reset time; draft kept.

08Edge cases

  1. EC-01

    Request fails

    The user sends a long, carefully written prompt and the request errors.

    Recommendation

    Put the prompt back in the input (or keep it in the message with Retry). Never make users retype.

  2. EC-02

    Too much context

    Attached files exceed the model's context window.

    Recommendation

    Warn before sending, show which files fit, and offer to summarise or select parts — don't silently truncate.

  3. EC-03

    Accidental send

    Enter sends a half-written prompt.

    Recommendation

    Allow editing the last message and regenerating; on mobile, use Return for new lines.

  4. EC-04

    Pasting a large document

    The user pastes 40 pages of text into the input.

    Recommendation

    Convert large pastes into an attachment chip (“Pasted text · 40 pages”) to keep the input usable.

  5. EC-05

    Sensitive data

    Users paste customer data into prompts.

    Recommendation

    State the data policy near the input once, and respect workspace settings that block certain data.

09Microcopy

  • Placeholder

    Avoid

    “Ask anything…”

    Prefer

    “Ask about this invoice, or @mention a customer”

  • Starter prompts

    Prefer

    “Summarise overdue invoices · Draft a payment reminder · Compare to last quarter”

  • Context chip

    Prefer

    “Using: Q4 pricing page ×”

  • Too much context

    Prefer

    “These files are too long to use together. Choose up to 3.”

10Accessibility

  • The input is a labelled textarea; context chips are a list of buttons with remove labels.
  • Starter prompts are buttons that fill the input rather than sending immediately.
  • Send has an accessible name and a keyboard shortcut that's documented.

11Developer notes

  1. 01

    Persist the draft per conversation so navigation or failure doesn't lose it.

  2. 02

    Represent context as structured references (document IDs, record IDs, file IDs), not pasted text.

  3. 03

    Count tokens before sending to warn about context limits.

  4. 04

    Debounce draft saves; don't send keystrokes to the server.

12Implementation prompt

For Claude Code, Codex or Cursor

Implement a production-quality AI prompt input.

Requirements:
- Auto-growing textarea (up to ~8 lines desktop, ~5 mobile), labelled.
- Enter sends / Shift+Enter newline on desktop; Return = newline + Send button on mobile.
- Context chips above the text for current document, selection, @mentioned records and attachments; removable.
- Attachments with upload progress; Send waits or warns while uploading.
- Context-specific starter prompts (buttons that fill the input).
- Token counting before send; warn and let users choose when context exceeds limits.
- Large pastes converted into an attachment chip.
- Draft persisted per conversation; restored on failure with Retry.
- Limit-reached state with reset time.
- Stop available while generating.

Do not redesign the existing interface.