KQ-1675 · CHECK/ANSWERS

Check Answers

The review step of a long form, read as a summary of sections with a Change link on each row: Change opens that row in place — its measured height glides open on springs.glide, the answer lifts away on the exit ease and the row's fields arrive in a cascade on springs.snap while an accent edge grows down its side — and Save closes it with the new answer landing on springs.flick over a highlighter stroke that sweeps in on snap and fades. Unanswered rows read Not answered and offer Answer, Send refuses until they are done, and a send runs a progress bar (the host's progress, or an eased creep) while each section's tick draws on flick, landing a receipt on springs.recoil or keeping every answer when it fails. Enter saves an open row, Escape cancels it, and focus moves to the first field on the way in and back to Change on the way out.

KQ-1675 · CHECK/ANSWERS

Check your answers

Permit BW-2026-0815 · Basinworks

Applicant

Full name
Ada Mensah
Email
ada.mensah@fieldline.co
Phone
0161 555 0192

Site

1 to answer

Site address
4 Weir Cottages, Mill Lane Basin Vale BW4 7QT
Parcel reference
Not answered
Current use
Residential

Works

1 to answer

Connection
Surface water
Planned start
14 Nov 2026
Excavation depth
1.2 m
Contractor
Not answered

Declaration

Landowner consent
I own the land

review · 9 of 11 answered

Open it on the Canvas stage

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/check-answers

Props

sections: CheckAnswersSection[]; default defaultCheckAnswersSections; { id, title, rows: { id, label, fields, format? }[] }; each field { id, label, kind?, required?, options?, suffix?, validate? }.
value / defaultValue: Record<string, string>; default — / defaultCheckAnswersValues; Answers by field id, controlled or initial.
onChange: (answers) => void; default —; Fires from the Save that changed answers, with all of them.
onEdit: (rowId) => void; default —; Change (or Answer) was pressed on a row.
onSave: (rowId, changes, answers) => void | Promise; default —; A row was saved with only the answers it changed; a promise holds the row open until it settles, a rejection keeps it open.
onSubmit: (answers) => void | Promise; default —; Send was pressed with every row complete; the bar runs until the promise settles and a rejection keeps the summary.
progress: number; default —; The submission's real progress, 0–1, while sending; omit it and the bar creeps toward 90%.
highlightMs: number; default 1400; How long a saved answer stays highlighted, in ms.
heading: string; default "Check your answers"; The panel's heading and accessible name.
reference: string; default "Permit BW-2026-0815 · Basinworks"; The line under the heading, repeated in the receipt.
submitLabel: string; default "Send application"; The send button's label.
status: "ready" | "loading" | "error"; default "ready"; Loading shows skeleton rows; error shows Try again.
onRetry: () => void; default —; Try again was pressed after the answers failed to load.
density: "compact" | "regular" | "roomy"; default "regular"; Row padding and type size.
dividerStyle: "rule" | "dotted" | "zebra"; default "rule"; Hairlines between rows, dotted rules, or alternate rows tinted.
accent: string; default "var(--accent-bright)"; Change links, the open row's edge, the highlighter, progress and Send — any CSS colour; buttons take its hue at a fixed lightness so white text reads in both themes.
height: number; default 540; The panel's height in px; the sections scroll inside it.
disabled: boolean; default false; Nothing can be changed or sent.
className: string; default —; Classes for the panel.

Prop	Type	Default	Description
sections	CheckAnswersSection[]	defaultCheckAnswersSections	{ id, title, rows: { id, label, fields, format? }[] }; each field { id, label, kind?, required?, options?, suffix?, validate? }.
value / defaultValue	Record<string, string>	— / defaultCheckAnswersValues	Answers by field id, controlled or initial.
onChange	(answers) => void	—	Fires from the Save that changed answers, with all of them.
onEdit	(rowId) => void	—	Change (or Answer) was pressed on a row.
onSave	(rowId, changes, answers) => void \| Promise	—	A row was saved with only the answers it changed; a promise holds the row open until it settles, a rejection keeps it open.
onSubmit	(answers) => void \| Promise	—	Send was pressed with every row complete; the bar runs until the promise settles and a rejection keeps the summary.
progress	number	—	The submission's real progress, 0–1, while sending; omit it and the bar creeps toward 90%.
highlightMs	number	1400	How long a saved answer stays highlighted, in ms.
heading	string	"Check your answers"	The panel's heading and accessible name.
reference	string	"Permit BW-2026-0815 · Basinworks"	The line under the heading, repeated in the receipt.
submitLabel	string	"Send application"	The send button's label.
status	"ready" \| "loading" \| "error"	"ready"	Loading shows skeleton rows; error shows Try again.
onRetry	() => void	—	Try again was pressed after the answers failed to load.
density	"compact" \| "regular" \| "roomy"	"regular"	Row padding and type size.
dividerStyle	"rule" \| "dotted" \| "zebra"	"rule"	Hairlines between rows, dotted rules, or alternate rows tinted.
accent	string	"var(--accent-bright)"	Change links, the open row's edge, the highlighter, progress and Send — any CSS colour; buttons take its hue at a fixed lightness so white text reads in both themes.
height	number	540	The panel's height in px; the sections scroll inside it.
disabled	boolean	false	Nothing can be changed or sent.
className	string	—	Classes for the panel.