Text input field for collecting user information. Supports all HTML input types with built-in accessibility and RTL support.
Preview
Installation
Usage
Examples
Input Types
With Label
With Icon
Disabled and Read-only
With Validation
Complete Form
Props
| Name | Type | Default | Description |
|---|---|---|---|
type | 'text' | 'email' | 'password' | 'number' | 'tel' | 'url' | 'search' | ... | 'text' | HTML input type |
placeholder | string | undefined | Placeholder text shown when input is empty |
disabled | boolean | false | Disables the input |
readOnly | boolean | false | Makes the input read-only |
required | boolean | false | Marks the input as required |
className | string | undefined | Additional CSS classes to apply |
The Input component extends all standard HTML input attributes including value, onChange, onBlur, name, and more.
Accessibility
Always Use Labels
Always pair inputs with labels using the htmlFor attribute matching the input's id. This is critical for screen readers and improves usability.
Placeholder Text
Don't rely solely on placeholder text for instructions. Use labels and helper text. Placeholders disappear when typing and may not be read by all screen readers.
Error Messages
Associate error messages with inputs using aria-describedby:
Required Fields
Use the required attribute and indicate required fields visually (typically with an asterisk).
RTL Considerations
Input fields automatically support RTL text direction. Text alignment and cursor position adapt based on the text direction.
LTR (English)
RTL (العربية)
Use Cases
Text entry in forms
Search fields
Login and authentication forms
Data filtering and queries
Best Practices
Do
- ✓ Always pair with a Label for accessibility
- ✓ Show validation errors below the input
- ✓ Use the appropriate type attribute (email, password, tel)
- ✓ Provide placeholder text as a hint, not a replacement for labels
Don't
- ✗ Don't rely on placeholder text alone for labeling
- ✗ Don't use for multi-line text — use Textarea instead
- ✗ Don't hide required field indicators