KQ-2118 · INLINE/ANSWERS

Inline Answers

A command menu that answers small questions inline: a sum with units, a conversion, a date offset or a time-zone question puts its answer in a large first row whose digits roll to each new result on springs.snap as you type (rollSpeed scales the spring with its damping ratio kept), counted from the decimal mark so the units stay put while a new leading digit rolls in from zero and opens its width on springs.glide. Under the figure the input is read back as chips, dashed in the warn colour where the provider had to guess (an ambiguous date, a sum waiting for its last number). Enter or Cmd/Ctrl+C copies the answer and the hint turns into a check drawn on springs.flick, Up and Down still move through the ordinary results, and providers are props that may throw: the error is reported once and the row says the provider is unavailable.

KQ-2118 · INLINE/ANSWERS

answer 36 km · Calculation

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/inline-answers

Props

answerSize: number; default 32; Size of the answer's figure, in px.
rollSpeed: number; default 1; How fast the digits roll: a multiple of the snap spring's speed, its damping ratio kept.
accent: "cobalt" | "plum" | "mint" | "ink" | string; default "cobalt"; The answer row's wash, chips and check. A name or any CSS colour.
providers: AnswerProvider[]; default defaultAnswerProviders; Tried in order, the first answer wins: { id, label, answer(query, context) } returning an InlineAnswer or null; may throw.
locale: string; default "en-GB"; Number formatting locale; also decides whether 12/03 reads day first.
unitSystem: "metric" | "imperial"; default "metric"; Which units a lone quantity converts to when you don't say.
maxFractionDigits: number; default 2; Most decimals in a number.
formatNumber: (n: number, maxFractionDigits: number) => string; default Intl.NumberFormat with locale; Format a number.
formatDate: (date: Date) => string; default defaultFormatDate; Format a date ("Fri 16 Oct 2026").
zones: AnswerZone[]; default defaultAnswerZones; Places the time-zone answers know: { id, label, names, offset } with fixed offsets.
homeZone: string; default "lisbon"; The zone "here" means, and the one dates are counted in.
results: AnswerResult[]; default defaultAnswerResults; The ordinary results under the answer: { id, title, group, detail?, icon, keywords? }.
query / defaultQuery: string; default — / ""; The field's text, controlled or initial.
onQueryChange: (query: string) => void; default —; Fires with every keystroke's new query.
onCopyAnswer: (answer: InlineAnswer) => void; default —; The answer was copied: Enter on it, a click, or Cmd/Ctrl+C.
onSelect: (result: AnswerResult) => void; default —; An ordinary result was chosen.
onProviderError: (providerId: string, error: unknown) => void; default —; A provider threw; reported once per query.
now: number; default defaultAnswerNow; The time dates and clocks are read from, in ms.
status: "ready" | "loading" | "error"; default "ready"; Whether the ordinary results have arrived; answers work either way.
onRetry: () => void; default —; Try again after an error.
placeholder: string; default "Ask or search Fieldline…"; The field's placeholder.
label: string; default "Search and answers"; The field's accessible name.
onDismiss: () => void; default —; Escape on an empty field. Without it Escape is left to the page.
className: string; default —; Classes for the outer container.

Prop	Type	Default	Description
answerSize	number	32	Size of the answer's figure, in px.
rollSpeed	number	1	How fast the digits roll: a multiple of the snap spring's speed, its damping ratio kept.
accent	"cobalt" \| "plum" \| "mint" \| "ink" \| string	"cobalt"	The answer row's wash, chips and check. A name or any CSS colour.
providers	AnswerProvider[]	defaultAnswerProviders	Tried in order, the first answer wins: { id, label, answer(query, context) } returning an InlineAnswer or null; may throw.
locale	string	"en-GB"	Number formatting locale; also decides whether 12/03 reads day first.
unitSystem	"metric" \| "imperial"	"metric"	Which units a lone quantity converts to when you don't say.
maxFractionDigits	number	2	Most decimals in a number.
formatNumber	(n: number, maxFractionDigits: number) => string	Intl.NumberFormat with locale	Format a number.
formatDate	(date: Date) => string	defaultFormatDate	Format a date ("Fri 16 Oct 2026").
zones	AnswerZone[]	defaultAnswerZones	Places the time-zone answers know: { id, label, names, offset } with fixed offsets.
homeZone	string	"lisbon"	The zone "here" means, and the one dates are counted in.
results	AnswerResult[]	defaultAnswerResults	The ordinary results under the answer: { id, title, group, detail?, icon, keywords? }.
query / defaultQuery	string	— / ""	The field's text, controlled or initial.
onQueryChange	(query: string) => void	—	Fires with every keystroke's new query.
onCopyAnswer	(answer: InlineAnswer) => void	—	The answer was copied: Enter on it, a click, or Cmd/Ctrl+C.
onSelect	(result: AnswerResult) => void	—	An ordinary result was chosen.
onProviderError	(providerId: string, error: unknown) => void	—	A provider threw; reported once per query.
now	number	defaultAnswerNow	The time dates and clocks are read from, in ms.
status	"ready" \| "loading" \| "error"	"ready"	Whether the ordinary results have arrived; answers work either way.
onRetry	() => void	—	Try again after an error.
placeholder	string	"Ask or search Fieldline…"	The field's placeholder.
label	string	"Search and answers"	The field's accessible name.
onDismiss	() => void	—	Escape on an empty field. Without it Escape is left to the page.
className	string	—	Classes for the outer container.