Input

• Type: Component (inputs)
• Access: Free, open source
• Page: https://ui.xzero.co.uk/components/input
• Markdown: https://ui.xzero.co.uk/components/input/markdown
• Registry item: https://mcp.xzero.co.uk/r/input.json
• Source file: registry/components/input/input.tsx
• Dependencies: motion
• Keywords: field, form, react input, text field, animated form input, input with error message, form field validation, labelled input, input helper text

When to use

• Any single-line text value in a form, such as name, email, or URL.
• Fields whose helper or error copy changes as the person types, where the message should reword in place.
• Plain form posts, since it forwards name and every native input attribute.

When not to use

• Use textarea for multi-line text.
• Use password-field, search-field, or number-field when the value has that shape.
• Use inline-edit for a value shown as page text and edited in place.

Installation

Register both Xzero UI namespaces in your project's components.json:

{
  "registries": {
    "@xzero-ui": "https://mcp.xzero.co.uk/r/{name}.json",
    "@xzero-ui-pro": "https://mcp.xzero.co.uk/r/pro/{name}.json"
  }
}

npx shadcn@4.23.0 add @xzero-ui/input

Install xzero-foundation once, and import @/components/xzero/foundation.css in your app root. No Xzero token is used by this snapshot. For sample portraits, photos, fonts, or logos, download https://mcp.xzero.co.uk/install-assets.mjs and run node xzero-install-assets.mjs <receiving-project>.

Usage

import { Input } from "@/components/xzero/input/input";

export function EmailField() {
  const [email, setEmail] = useState("");
  return (
    <Input
      label="Email"
      type="email"
      value={email}
      onChange={(event) => setEmail(event.target.value)}
      description="We only use this for receipts."
      error={email && !email.includes("@") ? "Enter a valid email" : undefined}
    />
  );
}

API reference

Input

A labelled text input with helper and error copy that open on a spring and reword in place.

Prop	Type	Default	Description
label (required)	string	–	Visible label, tied to the input with htmlFor.
description	string	–	Helper copy under the field, linked through aria-describedby.
error	string	–	Error copy. Sets aria-invalid and renders in a role="alert" row.
...props	InputHTMLAttributes<HTMLInputElement>	–	Forwarded to the native input, including ref, type, value, onChange, and name.

Accessibility

• Renders a native input with a real label, so focus and form behavior are native.
• Description and error ids are merged into aria-describedby alongside any caller value.
• Errors set aria-invalid and announce through role="alert"; animated words are aria-hidden with a plain screen reader copy.

Motion

• Helper and error rows open their height on a smooth spring, then changed words rise in and unblur while numbers roll digit by digit.
• Reduced motion mounts rows at full height and swaps words with an instant fade.

Responsive behavior

• The field fills its grid column with min-width 0, so it shrinks inside narrow layouts without overflowing.
• Text stays at the small size on touch, unlike password-strength, so iOS may zoom on focus if your --text-sm is below 16px.
• Hover border styles apply only on hover-capable fine pointers.

Performance

• One ResizeObserver per field measures the helper row for its height spring; cheap for a form, but avoid hundreds in a table.
• Only changed words animate, and numbers roll only the digits that changed.

Notes for AI

• Default single-line text field. Use password-field, search-field, or number-field when the value has that shape.
• Works controlled or uncontrolled like a native input; pass name for plain form submission.
• Changing the error string rewords it in place, so derive it from state instead of toggling separate messages.

Related

• Textarea: A multiline field for notes, descriptions, and longer text.
• Password field: Capture sensitive text with a visible reveal control.
• Search field: A recognizable search entry point with clear affordances.
• Number field: Enter a bounded number with clear increment controls.

Also in text fields

• Password strength: Show how strong a new password is while it is typed.
• Expanding search: An icon that morphs into a search field with results beneath it.
• Inline edit: Rename in place: the text becomes a field without moving.

Guidance for AI tools

Input: A single line field with clear labels and useful states. Follow the declared prop types and do not invent props. Keep keyboard access, reduced motion support, and both light and dark themes intact when adapting it.

Full library index: https://ui.xzero.co.uk/llms.txt