KB-271 · STEPFORM/ONE/QUESTION

One Question Step Form

The long ask, asked one question at a time: each prompt gets the whole frame, Enter carries you forward, and the rail keeps the length honest so nobody feels ambushed. A single question in flight, the answer held, the way back always open, and a summary of everything before it is sent.

KB-271 · STEPFORM/ONE/QUESTION

Install

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

$ pnpm dlx shadcn@latest add @kinetiq/stepform-one-question

Props

onAnswerChange: (id: string, value: string) => void; default —; Fires on every keystroke and choice, so a page can mirror answers live.
questions: OneQuestion[]; default —; Text or choice prompts; each carries a short rail label.
showHeader: boolean; default true; Draw the eyebrow and headline above the card. Pass false when the page composes its own header — a card standing beside a preview shares its top edge only once the header is lifted out of the column.
onSubmit: (answers) => void; default —; Fired once, on the review stage.
summaryTitle / submitLabel / doneTitle / doneCopy: string; default —; The last two frames.

Prop	Type	Default	Description
onAnswerChange	(id: string, value: string) => void	—	Fires on every keystroke and choice, so a page can mirror answers live.
questions	OneQuestion[]	—	Text or choice prompts; each carries a short rail label.
showHeader	boolean	true	Draw the eyebrow and headline above the card. Pass false when the page composes its own header — a card standing beside a preview shares its top edge only once the header is lifted out of the column.
onSubmit	(answers) => void	—	Fired once, on the review stage.
summaryTitle / submitLabel / doneTitle / doneCopy	string	—	The last two frames.