‹ components

InlineValidation

draftv0.9.0·open in canvas

Labeled field with reserved-height hint ↔ error swap. Validates on blur / debounce. Interior inline-validation contract on CIDS Input.

Installnpx shadcn add @cids/inline-validation
Live demo

Paste a Solana address.

Paste a Solana address.

Motion · tap to replay

honors reduced-motion

Opacity 150ms on hint/error/icons. No `motion`. Clearing invalid is immediate (no debounce).

Brand chip remounts on tap · highlighted tokens are named in this component's doc · spring is budgeted to human feedback only.

import { InlineValidation } from "@/design-system";

<InlineValidation
  label="Recipient"
  value={addr}
  onChange={setAddr}
  validate={(v) => (v.length >= 32 ? null : "Enter a Solana address")}
  hint="Paste a wallet or mint address."
/>

Tokens · live

Resolves in the active theme — flip the toggle above to verify.

States · from doc

Parsed from the doc. Interact with the live demo for hover/active.

idlependingvalidinvaliddisabled

Labeled field with reserved-height hint ↔ error swap. Validates on blur / debounce. Interior inline-validation contract on CIDS Input.

Anatomy

Label
┌──────────────────────────── ✓/! ┐
│ value                           │ ← Input + status icon
└─────────────────────────────────┘
hint ⟷ error   ← same grid cell, fixed height

Props

PropTypeDefaultNotes
labelstring—Visible label (htmlFor).
value / onChangecontrolled—Field owns no text.
validate(v: string) => string null`—Message or null if ok.
hintstring—Resting help; crossfades with error.
debouncenumber400ms before invalid message updates.
typeinput types"text"Native type.
required / disabledbooleanfalse—
classNamestring—cn-merged.

Motion

A11y

Self-contained: copy the folder into any Tailwind+React app, or use the install command above. Docs and this page render the same file on disk — they cannot drift.