Input
Captures user text input through text fields, search boxes, or textareas. Supports validation and contextual labels.
Code
Installation
Input component:
npx shadcn@latest add inputSearch Input component:
npx shadcn@latest add search-inputTextarea component:
npx shadcn@latest add textareaBasic Example
import { Input } from "@/components/ui/input"
<Input placeholder="Enter your email" />
<Input type="email" placeholder="email@example.com" />
<Input type="password" placeholder="Password" />Search Input
import { SearchInput } from "@/components/ui/search-input"
<SearchInput placeholder="Search..." />
// With search callback
<SearchInput
placeholder="Search products..."
onSearch={(value) => console.log("Searching:", value)}
/>Textarea
import { Textarea } from "@/components/ui/textarea"
<Textarea placeholder="Enter your message" rows={4} />Reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| type | string | "text" | Input type. Options: text, email, password, number, etc. |
| placeholder | string | — | Placeholder text |
| variant | string | "default" | Visual variant. Options: default, search |
| disabled | boolean | false | Disable the input |
| ...props | InputHTMLAttributes | — | All standard HTML input attributes |
States
Input Types
Search Input
Textarea
Usage Guidelines
When to Use
Use input fields for single-line text entry like names, emails, passwords, and search queries. Use textarea for multi-line content like messages, descriptions, and comments.
Always pair inputs with labels for accessibility. Use appropriate input types (email, password, etc.) to provide better mobile keyboard support and validation.
Best Practices
- Always provide clear labels for inputs
- Use placeholder text to show expected format
- Choose appropriate input types for better UX
- Provide helpful error messages and validation feedback
- Group related inputs logically
Accessibility
Always associate labels with inputs using htmlFor and id attributes. Use the Label component for proper accessibility relationships. Ensure inputs have sufficient color contrast and clear focus indicators.
Provide clear error messages near the input when validation fails. Use aria-describedby to associate error messages with inputs for screen readers.