Input
A styled text input with smooth focus transitions, shadow effects, and full HTML input compatibility.
Types
File upload
With label
Error state
Please enter a valid email address.
Disabled
Installation
pnpm
pnpm dlx @hex-core/cli add inputEmail input
An email-type input
tsx
<Input type="email" placeholder="you@example.com" />File upload
File input with styled file button
tsx
<Input type="file" />With label
Input paired with a Label component
tsx
<div className="grid w-full max-w-sm gap-1.5">
<Label htmlFor="email">Email</Label>
<Input type="email" id="email" placeholder="Email" />
</div>API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
type | "text" | "password" | "email" | "number" | "search" | "tel" | "url" | "file" | "hidden" | text | The HTML input type |
placeholder | string | — | Placeholder text shown when the input is empty |
disabled | boolean | false | Disable the input |
value | string | — | Controlled input value |
defaultValue | string | — | Default value for uncontrolled usage |
onChange | function | — | Change handler for controlled usage: (e: ChangeEvent<HTMLInputElement>) => void |
className | string | — | Additional CSS classes to merge with the component styles |
AI Guidance
When to use
Use for single-line text input: names, emails, passwords, search, numbers. Always pair with a Label for accessibility.
When not to use
Don't use for multi-line text (use Textarea). Don't use for selection from predefined options (use Select). Don't use for rich text editing.
Common mistakes
- Missing associated Label element for accessibility
- Using type='number' without min/max constraints
- Not providing placeholder text for context
Accessibility
Always pair with a Label using htmlFor/id. Consider aria-describedby for helper text or error messages.
Token budget: 300