Input

Use Input when you want a ready-made field surface with labeling, helper copy, and error messaging built in.

Preview

Input states

Inputs keep label, helper text, and validation messaging aligned without extra form wrappers.

Project nameUsed in your dashboard and generated URLs.

Read-only exampleUse this for immutable values or generated fields.

Validation exampleA project name is required before publishing.

Registry install

pnpm dlx shadcn@latest add https://react.tileui.zmorg.cn/r/input.json

Package usage

import { Input } from '@tile-ui/react';
 
export function ProfileNameField() {
	return <Input label="Display name" helperText="Shown on your public profile." />;
}

Highlights

Label and helper text built in
Consistent ARIA wiring
Error-state messaging
Matches Textarea anatomy for form consistency

Registry dependencies

Item	Purpose
`input`	Component source
`styles`	Shared SCSS tokens and globals

API reference

Prop	Type	Notes
`label`	`string`	Optional field label rendered above the input.
`helperText`	`string`	Displayed below the field when there is no error.
`error`	`string`	Displays invalid state and error messaging.
`required`	`boolean`	Adds required styling to the label.