Input

The Input component is a styled text input that provides consistent theming across your application.

Live preview in the UI Catalogue →

Import

import { Input } from "@tailor-platform/app-shell";

Basic Usage

<Input placeholder="Enter your name" />

Props

Accepts all standard HTML <input> props.

Prop	Type	Default	Description
type	string	"text"	HTML input type
placeholder	string	-	Placeholder text
disabled	boolean	false	Disables the input
className	string	-	Additional CSS classes

Examples

Text Input

<Input type="text" placeholder="Enter your name" />

Email Input

<Input type="email" placeholder="you@example.com" />

Number Input

<Input type="number" placeholder="0" min={0} max={100} />

Disabled Input

<Input value="Read-only value" disabled />

With onChange Handler

const [value, setValue] = useState("");

<Input value={value} onChange={(e) => setValue(e.target.value)} placeholder="Type something..." />;

TypeScript

import { type InputProps } from "@tailor-platform/app-shell";

Related Components

• Button - Pair with inputs in forms
• Textarea - Multi-line counterpart, for free-text that outgrows one line
• Checkbox - Boolean control with the same Field / React Hook Form integration