ns-ui
Inline per-field validation where the bottom border diffuses an error tint in from the exact offending character, like litmus paper — slow and pale while an async check is still pending, fast and decisive once it's definitely wrong, and it wicks back out the moment the field is fixed.
Use when a text field whose error state must point at the specific character that broke a rule, and must read differently while an async check is still pending versus once it's definitively wrong — pick input-focus-membrane instead for a general-purpose organic focus ring that only distinguishes idle/focus/error/valid-submit, not a per-character fault position or a pending state.
Install
npx shadcn add https://design.helpmarq.comns-ui / validation-inline-wick
No instant red flash. The tint diffuses in from the exact character that broke the rule, slower and paler while still checking, faster and decisive once it's certain — and wicks back out the moment you fix it.
| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | — | — |
| name? | string | — | — |
| id? | string | — | — |
| placeholder? | string | — | — |
| defaultValue? | string | — | uncontrolled initial value |
| value? | string | — | controlled value; omit for uncontrolled |
| onValueChange? | (value: string) => void | — | — |
| validate? | (value: string) => LitmusOutcome | Promise<LitmusOutcome> | — | Return synchronously for an instantly-known rule ("definitely wrong" — fast, decisive diffusion) or return a Promise for anything that has to ask elsewhere first (uniqueness, server-side rules — "still checking", slower, tentative, pulsing diffusion until it settles). |
| debounceMs? | number | — | ms after the last keystroke before validate runs. Default 260. |
| required? | boolean | — | — |
| disabled? | boolean | — | — |
| autoComplete? | string | — | — |
| className? | string | — | — |