‹ components

Input

stablev1.0.0·open in canvas

Single-line text field on the container surface; `invalid` wires the error state.

Installnpx shadcn add @cids/input
Live demo

Motion · tap to replay

honors reduced-motion

Border/background transition 150ms, targeted properties only.

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

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

<Input placeholder="Search tokens…" />
<Input invalid value={handle} onChange={…} aria-describedby="handle-err" />

Tokens · live

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

States · live

Forced instances — hover/focus still work on the live demo above.

restfocusinvaliddisabled .

rest

invalid

disabled

Single-line text field on the container surface; invalid wires the error state.

Anatomy

┌ placeholder / value ────────┐
└─────────────────────────────┘ ← container bg, hairline border,
                                  sell border when invalid

Props

PropTypeDefaultNotes
size"sm" "md" \"lg"`"md"Heights 28 / 36 / 44 px (shared scale).
invalidbooleanfalseSets aria-invalid + sell border. Put the error text next to the field and link via aria-describedby.
classNamestring—cn-merged.
…restInputHTMLAttributes—Native pass-through (value, onChange, type…).

Motion

Border/background transition 150ms, targeted properties only.

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.