Kinetiq

KQ-002 · TRACE/INPUT

Trace Input

Focus draws its own boundary — a stroke traces the field's perimeter, the label glides to an overline, and errors annotate themselves with a dimension line.

KQ-002 · TRACE/INPUT

As etched on the chassis plate.

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

PropTypeDefaultDescription
labelstring—Field label — rests as placeholder, floats to overline when focused or filled.
description / errorstring—Helper and error lines below the field, chained into aria-describedby. Errors nudge the field and set aria-invalid.
prefix / suffixReactNode—Leading and trailing slots inside the field.
…input propsOmit<InputProps, "prefix">—Standard input passthrough; controlled and uncontrolled both work.