Input

A single-line text field that draws only the control: border, focus ring and sizing, with no label, hint or error state of its own. Reach for it as the control inside FieldFieldA labelled control with one line under it - the error is announced by being pointed at, not by being red.@sushindustries/ui · content, or anywhere a form needs a bare native <input>.

Why it is built this way

An input that manages its own state fights every form library it meets, so InputInputA text input, and only the drawing of one - state and labels belong to the form and to Field.@sushindustries/ui · content stays to the drawing: state, validation and labels belong to the form and to FieldFieldA labelled control with one line under it - the error is announced by being pointed at, not by being red.@sushindustries/ui · content. The full native <input> prop surface passes through untouched, which is what lets type="email" or type="date" work without this component knowing anything about them.

What it does not do

It has no invalid state of its own - the red border comes from FieldFieldA labelled control with one line under it - the error is announced by being pointed at, not by being red.@sushindustries/ui · content's error prop, not from anything InputInputA text input, and only the drawing of one - state and labels belong to the form and to Field.@sushindustries/ui · content tracks. And it does no formatting or parsing beyond what the browser's own input types already do; that logic stays with whoever owns the value.

Install

tanstack add https://adamjurek.com/r/tanstack/input.json

pnpm dlx shadcn@latest add https://adamjurek.com/r/shadcn/input.json

pnpm add @sushindustries/ui @sushindustries/atoms

What you get