KQ-754 · TEMPLATE/FILL

Template Fill

A prompt with blanks to fill. The template's blanks are real inline inputs on a wash, each sized by a hidden mirror so its width glides on glide from the placeholder's width to the typed word's — filling a blank collapses its placeholder. One layoutId ring travels to whichever blank has focus on snap, so Tab and Shift+Tab move it with no handling of their own, and Enter commits a blank and carries focus to the next. Beneath, the composed prompt previews with filled values cross-faded to ink and empty blanks left as dashed slots; a count chip reads the progress and the Use button arms when the last blank is filled.

KQ-754 · TEMPLATE/FILL

Release note0/ 4 filled

Write a release note for about , in under words.

Write a tone release note for who reads it about the feature, in under a number words.

94 chars

0 / 4 filled

Install

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

$ pnpm dlx shadcn@latest add @kinetiq/template-fill

Props

template: string; default —; A sentence with {key} or {key: placeholder words} blanks.
values / defaultValues: Record<string, string>; default {}; Controlled or initial values by key.
onValuesChange: (values: Record<string, string>) => void; default —; Fires from every edit.
onCommit: (key: string, value: string) => void; default —; Fires from Enter or blur on a blank whose value changed since its last commit.
onUse: (prompt: string) => void; default —; Fires from the Use button with the composed prompt.
useLabel: string; default "Use prompt"; The button's copy.
label: string; default —; Names the group.

Prop	Type	Default	Description
template	string	—	A sentence with {key} or {key: placeholder words} blanks.
values / defaultValues	Record<string, string>	{}	Controlled or initial values by key.
onValuesChange	(values: Record<string, string>) => void	—	Fires from every edit.
onCommit	(key: string, value: string) => void	—	Fires from Enter or blur on a blank whose value changed since its last commit.
onUse	(prompt: string) => void	—	Fires from the Use button with the composed prompt.
useLabel	string	"Use prompt"	The button's copy.
label	string	—	Names the group.