KQ-1732 · FILED/STEPS

Filed Steps

A wizard of stacked cards: the current step in front with the next ones peeking above it. Finishing a step files it — a sheet the size of the card flies down to its place in the pile at the foot on springs.glide, animating position and size rather than scale so no text stretches, while the card's face fades and its summary arrives, and the pile takes the weight with a springs.recoil press while the card behind steps forward on glide. Clicking a tab lifts its card back up the same way while the current stack steps aside; Save files it again with the new summary, Cancel or Escape puts it back unchanged, and Skip for now files a card unfinished with a mark on its tab that Send points back to.

KQ-1732 · FILED/STEPS

Book a site survey

Fieldline · Survey desk

2 of 5 filed

What kind of survey?

You can add another type after the first visit.

3 / 5

Survey type

2 filed · site unfinished · survey type on top

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/filed-steps

Props

steps: FiledStepsStep[]; default defaultFiledStepsSteps; { id, title, short?, description?, fields, summary?, skippable? } — fields are { id, label, kind?: "text" | "email" | "tel" | "textarea" | "choice", options?, placeholder?, required?, validate? }.
value / defaultValue: Record<string, string>; default — / defaultFiledStepsValues; Field values by field id, controlled or initial.
onValueChange: (values) => void; default —; Fires from the field that changed, and when Cancel restores a reopened card, with every value.
defaultFiled: Record<string, "done" | "incomplete">; default defaultFiledStepsFiled; Steps already filed when the wizard opens, finished or unfinished.
onStepComplete: (stepId, values, complete) => void; default —; Fires when a card is filed: Continue or Save (complete true), Skip for now (complete is whether its fields are valid).
onReopen: (stepId) => void; default —; Fires when a tab lifts its card back up for editing.
onFinish: (values) => void; default —; Fires from Send once every step's fields are valid.
tabStyle: "folder" | "index" | "pill"; default "folder"; Folder tabs with sloped shoulders on a drawer, overlapping index strips with a coloured top edge, or rounded pills.
stackDepth: number; default 2; How many of the next cards peek above the current one, 0 to 3.
accent: string; default "var(--accent-bright)"; The front card's edge, tab numbers, choice pills and primary buttons — any CSS colour.
density: "compact" | "regular" | "roomy"; default "regular"; Card padding, field height and type size.
title: string; default "Book a site survey"; The wizard's heading.
subtitle: string; default "Fieldline · Survey desk"; One line under the heading.
finishLabel: string; default "Send request"; The last card's button.
status: "ready" | "loading" | "error"; default "ready"; Loading shows a placeholder card; error explains and offers Try again.
onRetry: () => void; default —; Try again was pressed after the steps failed to load.
height: number; default 540; Height of the surface in px.
disabled: boolean; default false; Read only: nothing can be filed, reopened or sent.
className: string; default —; Classes for the surface.

Prop	Type	Default	Description
steps	FiledStepsStep[]	defaultFiledStepsSteps	{ id, title, short?, description?, fields, summary?, skippable? } — fields are { id, label, kind?: "text" \| "email" \| "tel" \| "textarea" \| "choice", options?, placeholder?, required?, validate? }.
value / defaultValue	Record<string, string>	— / defaultFiledStepsValues	Field values by field id, controlled or initial.
onValueChange	(values) => void	—	Fires from the field that changed, and when Cancel restores a reopened card, with every value.
defaultFiled	Record<string, "done" \| "incomplete">	defaultFiledStepsFiled	Steps already filed when the wizard opens, finished or unfinished.
onStepComplete	(stepId, values, complete) => void	—	Fires when a card is filed: Continue or Save (complete true), Skip for now (complete is whether its fields are valid).
onReopen	(stepId) => void	—	Fires when a tab lifts its card back up for editing.
onFinish	(values) => void	—	Fires from Send once every step's fields are valid.
tabStyle	"folder" \| "index" \| "pill"	"folder"	Folder tabs with sloped shoulders on a drawer, overlapping index strips with a coloured top edge, or rounded pills.
stackDepth	number	2	How many of the next cards peek above the current one, 0 to 3.
accent	string	"var(--accent-bright)"	The front card's edge, tab numbers, choice pills and primary buttons — any CSS colour.
density	"compact" \| "regular" \| "roomy"	"regular"	Card padding, field height and type size.
title	string	"Book a site survey"	The wizard's heading.
subtitle	string	"Fieldline · Survey desk"	One line under the heading.
finishLabel	string	"Send request"	The last card's button.
status	"ready" \| "loading" \| "error"	"ready"	Loading shows a placeholder card; error explains and offers Try again.
onRetry	() => void	—	Try again was pressed after the steps failed to load.
height	number	540	Height of the surface in px.
disabled	boolean	false	Read only: nothing can be filed, reopened or sent.
className	string	—	Classes for the surface.