KQ-002 · TRACE/INPUT

Trace Input

A plain text field with the focus drawn rather than switched on. A stroke traces the field's perimeter as it takes focus and the label warms to the ring colour; errors nudge the box and annotate themselves with a dimension line. The label sits above the box, so the affixes and the text share one centred line inside it.

KQ-002 · TRACE/INPUT

Install

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

$ pnpm dlx shadcn@latest add @kinetiq/trace-input

Props

label: string; default —; Field label, rendered above the box. Pass labelHidden to keep it for assistive tech only.
description / error: string; default —; Helper and error lines below the field, chained into aria-describedby. Errors nudge the field and set aria-invalid.
prefix / suffix: ReactNode; default —; Leading and trailing slots inside the field.
…input props: Omit<InputProps, "prefix">; default —; Standard input passthrough; controlled and uncontrolled both work.

Prop	Type	Default	Description
label	string	—	Field label, rendered above the box. Pass labelHidden to keep it for assistive tech only.
description / error	string	—	Helper and error lines below the field, chained into aria-describedby. Errors nudge the field and set aria-invalid.
prefix / suffix	ReactNode	—	Leading and trailing slots inside the field.
…input props	Omit<InputProps, "prefix">	—	Standard input passthrough; controlled and uncontrolled both work.