Form result

Form result — what a form shows once it is sent: the site’s .form-success-msg (global-2026.css), the design lead’s block, kept over the Alert because the Alert is one box and this is two.

Beta · Feedback and status · packages/css/src/components/form-result.css

.pui-form-result (--on-white --on-dark --compact) · __head __icon __title __slot __text. The check beside the title over the text in a slot — two parts, where the Alert is one box.

Form result — every size and every stateOpen in the workshop

Sizes across, states down.

What it is for

• Ground tinted (the slot white on the tinted card the form was in) / on-white (the slot surface/sunken — a grey slot on a white card, the inversion rule) / on-dark (the footer’s subscribe: ink text/on-inverse, the slot a white wash, color/alpha/white-10)
• Size default / compact — the small subscribe pills: gap space/8, the head flush, the check stays 24, the title body/medium, the text body/small, the slot’s inset space/8 / space/12
• Title and Text are text properties; the Icon is exposed

Use when a form has been sent and the page says so in place of the form — contact, apply, subscribe.

Do not use when something went wrong (Alert); the message needs an action (Alert with a button, or a Dialog); it is a passing notice (Toast).

Relates to Alert, Toast, Field, Input group, Card.

Anti-patterns the block shown before the form is sent · a red result (that is an Alert) · a title that is a sentence · the slot on the same surface as the card (the inversion rule) · a check drawn by hand.

Keywords: form result, success message, thank you, sent, submitted, confirmation

Figma — page Form result: Form result (6 variants)

The markup — copy this

The class, the parts, and nothing that is not in the package. The same block opens form-result.css.

<div class="pui-form-result" role="status" aria-live="polite">
  <div class="pui-form-result__head"><span class="pui-icon pui-icon--24 pui-form-result__icon"><svg><use href="icons.svg#circle-check"/></svg></span>
    <p class="pui-form-result__title">Thank you</p></div>
  <div class="pui-form-result__slot"><p class="pui-form-result__text">Our team will get back to you shortly.</p></div></div>

The modifiers

	What it is	Note
Ground	(none) tinted card · --on-white · --on-dark	—
Size	(none) default · --compact	—

Accessibility — measured, not assumed

Every number here is measured on the rendered component: contrast (npm run contrast:render), the focus ring (npm run focus) and the keyboard (npm run keyboard). The floors are principle 12’s.

Contrast

No story of this component renders a text pair axe can measure — a component made of surfaces and borders rather than words. The token pairs it uses are in artifacts/contrast-matrix.md.

The focus ring

Nothing in this component takes focus.

Keyboard

Nothing in this component claims an ARIA role with a keyboard contract; its controls are ordinary ones and the browser already gives them their keys.

Tab order across the whole library is document order over 344 stops, and Shift+Tab is its exact reverse — no keyboard trap anywhere (WCAG 2.1.2).