Established

Confidence signalling

A visible estimate of certainty — level, band, or hedged language — so users know when to check.

MTicket #4821dana-invoice-aug.pdf 2 fields to check

Milky Inc.

Invoice #8822

Billed toDana Ortiz

Issued12 Aug 2026

Charged14 Aug 2026

Card•••• 4417

Total$1,240.00

M Extracted by Milky

Customer Dana Ortiz High
Invoice #8822 High
Amount $1,240.00 High

Check the 2 flagged fields to continue.

Calibration, last 30 days: reviewers kept 98% of High fields unchanged, 81% of Medium, 54% of Low.

Try it: Open the Medium and Low fields: each says why Milky is unsure and shows the spot on the page. High fields need no second look.

In the wild

How one product ships this pattern. Click a screenshot to enlarge it.

Rossum 'Total amount' field details dialog listing data source and validation: User reviewed, Data integrity check, AI Engine 96.96% confidence — Rossum
Each extracted invoice field carries its own AI confidence score next to how the value was checked, so reviewers can see what the model is unsure about.
Source: Rossum knowledge base ↗

When to use

Classification, extraction, medical, legal and financial flows where silent certainty is dangerous.

Seen in

Document extraction review queues, AI UX Playground confidence patterns, enterprise copilot coverage flags.

For engineers

Bucket into levels unless the score is genuinely calibrated; log accepted-vs-corrected to test it.

Build prompt

A neutral, component-only prompt for a coding agent. Edit the stack block or anything else to fit your project, then copy it.

# Build the "Confidence signalling" pattern: `ConfidenceFieldList`

## Stack (edit this block to match your project)
- React 18+ with TypeScript: one function component, typed props, no `any`.
- Tailwind CSS, using your design system's tokens if you have them.
- Presentational only: data comes in through props, decisions go out through callbacks. No fetching or global state inside.
- If your codebase already has conventions (naming, shared components, tokens), follow them over this spec.

## What the pattern is for
A visible estimate of certainty — level, band, or hedged language — so users know when to check.

Use it when: Classification, extraction, medical, legal and financial flows where silent certainty is dangerous.

## What to build
A list of AI-extracted or AI-classified values, each with a confidence level shown as a word and a band, plus a short reason for anything below high. It directs review to the uncertain values and can block a dependent action until they are checked. It renders beside a source document in extraction, classification or review flows.

### Props
- `fields`: Array<{ id: string; label: string; value: string; level: "high" | "medium" | "low"; reason?: string; alternatives?: string[]; sourceRef?: string }>, bucketed levels, not raw scores.
- `score?`: Record<string, number>, shown only when `calibrated` is true.
- `calibrated`: boolean, whether numeric scores are trustworthy enough to display; default false.
- `calibration?`: string, evidence for the levels, e.g. "Last 30 days: reviewers kept 98% of High, 81% of Medium, 54% of Low unchanged".
- `onResolve(fieldId: string, value: string, changed: boolean)`: logs accepted versus corrected, which the parent uses to test calibration.
- `onFocusSource?(sourceRef: string | null)`: highlights the region of the source the value came from.
- `blockingAction?`: { label: string; onConfirm(): void }, an action enabled only once medium and low fields are resolved.
- `status`: "loading" | "ready" | "error".

### States it must render
- Loading: field rows with placeholders; no level shown until values arrive.
- Ready: each row shows label, value and a level chip ("High", "Medium", "Low") using text plus shape; medium and low rows are expanded with the reason, e.g. "The last digit is blurred in the scan. It reads as 7, but could be 1."
- Needs checking: a header count "2 fields to check" and the blocking action disabled with "Check the 2 flagged fields to continue".
- Resolved field: the row shows "Kept by you" or "Changed by you" with the original value if different.
- All resolved: the header turns green and the blocking action is enabled.
- Error: "Couldn't extract these fields" with Retry.

### Interactions
- Low and medium rows offer "Keep <value>" and one button per alternative, plus a free-text edit; each calls `onResolve`.
- Focusing a row calls `onFocusSource` so the matching area of the document is highlighted.
- High rows can be expanded and edited too, but are not required.

### Edge cases
- Uncalibrated models must not show percentages: with `calibrated` false, scores are ignored even if passed.
- Confidence is not evidence: when `sourceRef` is missing, show "No source location" next to the level rather than letting the level stand alone.
- All fields high: show no checking prompt, and keep the calibration line visible.
- A field the model could not read at all: show "Not found" as low with an empty input, never a guessed value.

## Must avoid
A precise percentage from an uncalibrated model, or confidence used as a substitute for citations.

## Engineering constraint
Bucket into levels unless the score is genuinely calibrated; log accepted-vs-corrected to test it.

## Accessibility
- Each level chip has text, and the row's accessible description includes the level and reason.
- Announce the remaining count after each resolution, e.g. "1 field left to check".

## House rules
- Real `<button>`/`<input>` elements, full keyboard use, visible focus; announce status changes with `aria-live="polite"`; respect `prefers-reduced-motion`.
- All user-facing text comes from props (or a `labels` prop) so it can be translated.
- One consistent accent marks anything the AI made or is doing; amber means "needs a person", red means risky, green means done. Never rely on colour alone.
- Fits a 360 px wide container without horizontal scrolling.

## Acceptance checks
- [ ] Every state above can be rendered by passing props, with no internal fake data.
- [ ] Every interaction and edge case above behaves as described.
- [ ] Nothing in "Must avoid" can happen with this component.

## Deliver
1. The component file with its exported prop types.
2. A short usage example that renders each state.

Download this prompt as Markdown, or every prompt as JSON for an agent.

Critique checklist for trust indicators

0 of 4 checked

These questions apply to every pattern in this family. Ticks are saved in this browser.

Can a claim be traced to a source in one click?
Does uncertainty change the interface, not just the wording?
Is confidence calibrated, or decorative?
Does the design make verification cheaper than re-doing the work?