iconiq.

Input

Standard rounded field with a visible label above, focus ring motion, and animated characters on the visible layer. Framer Motion.

Live preview

Freeform text with animated character reveal.

Every field keeps the same feel — type-aware, motion-consistent — tuned for real form flows.

Install

v0

Ship the registry bundle to v0 and iterate on motion or layout with prompts.

Usage

The export is lowercase input; alias it (e.g. input as Input) for JSX. Pass type for the native input kind ("text" by default; e.g. email, password, search). Spread other native attributes onto the underlying element. See tile 05 for API detail.

tsx
import { input as Input } from "@/components/ui/input";
import { useState } from "react";

export function NamedField() {
  const [value, setValue] = useState("");
  return (
    <Input
      label="Display name"
      type="text"
      value={value}
      onChange={setValue}
      autoComplete="name"
    />
  );
}

export function EmailField() {
  return (
    <Input
      label="Work email"
      type="email"
      placeholder="name@company.com"
    />
  );
}

Dependencies

Registry peers and how this component fits your app.

value / onChange

Controlled: pass value (string) and onChange (receives the string). Uncontrolled: omit both; the component keeps internal state starting empty.

label

Always-visible label above the field (default text “Type here”). Associated with the input via htmlFor.

type

Defaults to "text". Pass standard HTML types such as email, url, tel, search, or number — the animated overlay mirrors visible characters. For password, the field uses native masking (or plain text when revealed) with an eye / eye-off toggle. Search adds a minimal clear control (×) when there is text. Email sets a pattern plus blur validation and a destructive border when non-empty and invalid.

Native input props

Other attributes are spread onto the underlying input: placeholder, autoComplete, name, disabled, min, max, step (for number), inputMode, etc.

framer-motion

Focus ring on the rounded-md field; per-character animation applies when type is not password.

shadcn registry

Peer dependency framer-motion is declared on the registry item so shadcn add can install it when needed.

npx shadcn@latest add https://iconiqui.com/r/input.json