Input
A single line field with clear labels and useful states.
npm install https://animui.stracture.net/__local/package.tgzLive · keyboard ready
- 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.
- 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
Install animui once, then import any component or block from its typed package entry.
animui · 250 components and blocks
React 19 and React DOM 19 are required. The package includes Free and Pro entries, styles and TypeScript declarations.
npm install https://animui.stracture.net/__local/package.tgzLoad the stylesheet once at your app root, then use the typed component import:
import 'animui/styles.css';
import { Input } from 'animui/input';Read the Code tab for the implementation files and the API reference below for required props.
Download animui 0.3.0 · Agent guideexample.tsx
import { Input } from "animui/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} /> );}Input
A labelled text input with helper and error copy that open on a spring and reword in place.
PropTypeDefaultDescription
labelRequiredstring–Visible label, tied to the input with htmlFor.descriptionstring–Helper copy under the field, linked through aria-describedby.errorstring–Error copy. Sets aria-invalid and renders in a role="alert" row....propsInputHTMLAttributes<HTMLInputElement>–Forwarded to the native input, including ref, type, value, onChange, and name.- 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.
- 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.
- 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.
- 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
Give your coding assistant the Markdown reference instead of screenshots.
- 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.
The full library index for assistants is at /llms.txt.