Forms

Input

A single-line text control aligned to the 36px control grid.

StableUsed in Aback Tools, Aback LaunchRegistry JSON

Work email

We only use this for receipts.

Billing email

Enter a valid email address.

Workspace slug

Installation

Copy the source with the CLI to own and edit it, or import it from the npm package.

npx aback-ui@latest add input

Writes components/ui/input.tsx. First time in this project? Run npx aback-ui@latest init first, as the installation guide shows.

Import the parts you need from the installed file. The Code tab above has a complete, working example.

tsx

import { Input, inputClassName } from "@/components/ui/input";

Props and composition points for Input. Native element props pass through.

Prop	Type	Default	Description
`type`	`"text" \| "email" \| "password" \| "number" \| ...`	"text"	Native input type. Use number with inputMode for numeric keyboard hints.
`aria-invalid`	`boolean \| "true" \| "false"`	None	Turns the border destructive and pairs with a Field error.
`disabled`	`boolean`	None	Prevents interaction and reduces opacity.
`className`	`string`	None	Layout adjustments only; control height and focus stay on the system grid.

Dependencies: no extra packages, plus the shared @/lib/utils helper.

Semantics, keyboard behavior, and the decisions that keep the component operable.

Always pair with a visible Label or Field. Placeholders disappear and are not a substitute.
Error text must be associated through aria-describedby and the control marked aria-invalid.
The control keeps native autofill, form submission, and mobile keyboard behavior.
Do not use opacity on entered text or value text.

The Aback products whose interfaces shaped this component.