Skip to content
UI Kit
Accent color

Form states

Confirmations, errors that recover, saved drafts and the way back into a form.

3 components · 12 variants
Switch category

On this page

Every component of this category. Pick one to jump to its variants.

error-recovery

Error recovery

When something goes wrong, the form takes the blame, keeps every entry and shows the way out. Problems listed above the form, checks while typing with a fix for typos, a failed send that retries by itself, and an expired session that does not lose a word.

Props and details · Error recovery

Summary on top

All problems in a box above the form, each a link to its field. Fixing a field takes it off the list at once and draws a check, when the last one goes the box turns into a green all clear.

Open in Studio

Checks while typing

Checks after leaving a field, never while still typing. A taken username offers a free one, a mistyped domain is offered as a one tap fix, password rules tick off one by one.

Open in Studio

Send failed

The send did not go through and the form says so plainly, every word is still there. A countdown drains inside the retry button and tries again by itself, the message can be copied and another way to write stays open.

Open in Studio

Session expired

The sign-in ran out in the middle of a long text. The form stays visible behind a soft veil, a small dialog asks for the password, and after signing in the words are exactly where they were.

Open in Studio

save-progress

Save progress

Long forms that need not be finished in one go. Autosave in the browser with a quiet chip, a link by email to carry on anywhere, started forms as drafts, and a welcome back where the visitor stopped.

Props and details · Save progress

Autosave

Every change is kept in the browser after a short pause. A chip in the corner turns from a spinner into a check and counts how long ago it saved, a returning visitor gets the text back with a way to clear it.

Open in Studio

Drafts

Started forms as cards with a ring of progress, the step they stand at and when they were last edited. Cards lift under the pointer, removing one can be undone for as long as the note stands.

Open in Studio

Welcome back

A returning visitor is welcomed where they stopped, the steps as segments with the next one breathing softly. Continuing is the main action, starting over asks once with a soft height.

Open in Studio

success-states

Success states

The page after a form. It says what happened, what comes next and offers one useful thing to do. A reference with next steps, a receipt to print, what was sent with minutes left to change it, and where a request stands now.

Props and details · Success states

Next steps

A check that draws itself with a ring of light, the reference to copy, and the steps ahead as cards that rise in one after another, the first already ticked.

Open in Studio

Receipt

The confirmation beside a receipt drawn as a paper slip with a torn edge. Issuer, lines, total, how it was paid and the tax note, ready to print or save as a PDF.

Open in Studio

What you sent

The answers as they arrived, row by row. A ring runs down the minutes left to change them, then the button goes and the line says the work has started.

Open in Studio

Status tracker

Where the request stands now on a rail that fills to the current step, which pulses softly. An estimate on top, updates by text with one switch.

Open in Studio

Similar components

More from Content, the same area of the kit.

Often combined with

Sections that usually sit next to Form states on a page.

Often searched

Jump to

Copied to the clipboard