[ [UI.02] Components ] Input

Input

> A basic text input field for forms and data entry.

Import

[ [0x5B] IMPORT ]

1import { Input } from "@/components/ui/input"

Preview

[ [0x00] INPUT ]

1<Input placeholder="Enter your email..." />

Variants

[ [0x00] DEFAULT ]

1<Input placeholder="Type here..." />

[ [0x00] WITH LABEL ]

[EMAIL]:

1<div className="grid gap-2">
2  <Label htmlFor="email">[EMAIL]:</Label>
3  <Input id="email" type="email" placeholder="m@example.com" />
4</div>

[ [0x00] DISABLED ]

1<Input disabled placeholder="Disabled input" />

[ [0x00] ERROR STATE ]

1<Input error placeholder="Invalid input" />

[ [0x00] SUCCESS STATE ]

1<Input success placeholder="Valid input" defaultValue="john@example.com" />

[ [0x00] LOADING ]

1<Input loading placeholder="Loading..." />

[ [0x00] FILE INPUT ]

1<Input type="file" />

API Reference

[ [0x00] API REFERENCE ]

Prop	Type	Default	Description
error	`boolean`	`false`	Show error styling with red border.
success	`boolean`	`false`	Show success styling with green ring on focus.
loading	`boolean`	`false`	Show loading spinner and disable input.
loadingText	`string`	-	Screen reader text for loading state.
disabled	`boolean`	`false`	Disable the input.
type	`string`	`"text"`	HTML input type (text, email, password, etc.).

Accessibility

[ [0x58] A11Y ]

Uses native <input> element for full keyboard support
Supports aria-invalid for error states
Loading state uses aria-busy for screen readers
Screen reader text provided via aria-describedby when loading

When to Use

[ [0xE9] USAGE GUIDANCE ]

✓ Use Input when:

• Collecting single-line text data (name, email, search)
• User needs to enter short, freeform text
• You need real-time validation feedback (error/success states)
• Loading indicator needed during async validation

✗ Don't use when:

• Multi-line text needed (use Textarea instead)
• Password entry (use Input Password for show/hide functionality)
• Selecting from predefined options (use Select or Radio Group)
• Numeric input with increment/decrement (use Input Number)
• Date selection (use Date Picker for calendar UI)

State Usage:

• error: Show validation errors immediately after blur or submit
• success: Confirm valid input (email verified, username available)
• loading: Async validation in progress (checking availability)
• disabled: Field not editable in current context