Input
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.