N independently-derived values that must be identical — with a FAIL row.
OPERATE THE FORM ↓A STUDY IN AGREEMENT
Two independent calculation paths should arrive at the same total. Introduce a mismatch and watch the verdict change.
PATH A / SUM
2 + 3 + 510PATH B / PRODUCT
2 × 510PASS / TWO PATHS, THE SAME VALUE
Local arithmetic only: adding 2 + 3 + 5 and multiplying 2 × 5 both give 10. The mismatch control deliberately perturbs the second result.
THE SPECIMEN INVARIANT
Library ≡ Book ≡ Site
Library
the form's code
Book
this page
Site
a consumer
Variants v1
Variants v1
Variants v1
PASS
One import path, three renderers — nothing to reconcile.
Variants v1
screenshot of v0
Variants v1
FAIL
The classic drift: a book showing pictures of forms instead of forms. This site refuses it by construction.
Library ≡ Book ≡ Site — 1 of 2 rows agree; any disagreement is a distinct, named failure, never a warning.
02 / THE DECISION
YOU ARE SHOWING WHAT HOLDS IT UP
Showing that independent authorities agree.
Are there N values derived separately that must be identical — and would a mismatch be a named failure?
EXPLORE THE SELECTION GRAMMAR ↗The Agreement form is a HAUSE instrument — n independently-derived values that must be identical — with a FAIL row. The check replays on demand: values materialise left to right at the hause stagger, the way the comparison actually runs. A FAIL row is first-class — an invariant you never see fail is decoration.
THE LIBRARY’S OWN ACCOUNT
components/forms/Agreement.tsx
The check replays on demand: values materialise left to right at the hause stagger, the way the comparison actually runs. A FAIL row is first-class — an invariant you never see fail is decoration.
Every instrument carries an always-present text fallback, so the point survives with the interaction removed — for reduced motion, for no-JS, for a crawler, and for anyone in a hurry. ARIA state is part of the form, because an agent browser reads aria-pressed and aria-expanded to understand what it is looking at.
The opening study is an authored demonstration, not an additional component API. Expand the library specimen above to inspect the reusable form. Its props below come directly from the source.
REACT · Agreement
import { Agreement } from "@chrishayuk/hause/components/forms/Agreement";
export type AgreementProps = {
kicker: string;
/** The authorities that must agree, in order. */
columns: { label: string; source: string }[];
rows: { values: string[]; verdict: "PASS" | "FAIL"; note?: string }[];
caption?: string;
};
export function Agreement({ kicker, columns, rows, caption }: AgreementProps)The import and the complete props contract. For installation and composition, follow the Build guide.
NOT INVENTED IN ISOLATION
Used in vindex3.org and hause.design. These exhibitions share an author; this is evidence of reuse, not independent adoption.
05 / THE PROBLEMTHE BOOK DRIFTS FROM THE CODE ↗Documentation is a copy of the system, and copies rot. Every count in it was true on the day it was typed.07 / THE PROBLEMEVERYTHING SOUNDS EQUALLY CERTAIN ↗A generated paragraph, a measured result and an open question arrive in the same voice, at the same size, with the same confidence. The interface has no way to say which is which, so the reader supplies the difference — usually wrongly.PUBLISHED 31 AUG 2026 · REVISED 9 SEP 2026 · VERSION 0.1.0
CITEsource components/forms/Agreement.tsx · site build 3ee5339 · built 2026-09-09
CITE THIS
Web page · 0.1.0
Hay, C. (2026). Agreement — a HAUSE instrument. In HAUSE — a design system for AI (Version 0.1.0). hause.design. https://hause.design/forms/agreement
The specimen, the source account and the props share one form record. Cite this page or follow its source identifier to inspect the implementation.