Input
Displays a form input field or a component that looks like an input field.
When to Use
Use the Input component when you need to:
- Collect single-line text data (names, emails, passwords, search queries)
- Capture numeric input (phone numbers, quantities, prices)
- Accept file uploads with native browser UI
- Create forms with standard HTML input types (email, tel, url, date, etc.)
- Build search interfaces or filter controls
Default
A simple email input field.
Input Types
Different input types for various data entry scenarios.
File
File input for uploading files with a label.
Disabled
Disabled input that prevents user interaction.
With Label
Input paired with a label for better accessibility.
With Button
Input combined with a button for actions like subscribe or search.
States
Different input states for various UI feedback scenarios.
Form Example
Multiple inputs in a form layout.
UX & Design Guidelines
Visual Hierarchy
Always pair inputs with Label components above or to the left. Use placeholder text for examples, not instructions. Place required field indicators (*) in labels, not placeholders.
Spacing & Layout
Use max-w-sm (24rem) for single inputs to maintain readability. In forms, use space-y-4 between input groups and space-y-2 between label and input. For inline layouts (search, subscribe), use flex gap-2.
Responsive Behavior
Inputs adapt to mobile (320px+) by using full width on small screens. Touch targets are minimum 44px tall for mobile accessibility. File input buttons maintain proper spacing and sizing on all devices.
Color & Contrast
All input states meet WCAG 2.1 AA contrast requirements (4.5:1 for text). Error states use destructive color with aria-invalid. Focus rings use ring-2 ring-ring for clear visibility. Selection highlighting uses primary color for consistency.
Accessibility
Keyboard Navigation
- Tab — Focus next input
- Shift + Tab — Focus previous input
- Arrow keys — Navigate within text (left/right) or adjust number inputs (up/down)
- Home / End — Jump to start/end of text
Screen Reader Support
- Input announces its type and current value
- Labels are properly associated via
htmlForattribute - Error messages linked with
aria-describedby - Required fields announced via
requiredoraria-required - Disabled and read-only states properly announced
Focus Management
Visible focus indicator with 2px ring using focus-visible:ring-2 focus-visible:ring-ring. Focus state meets WCAG 2.1 Level AA requirements with 3:1 contrast ratio against background.
ARIA Attributes
Related Components
Textarea
Multi-line text input for longer content like comments, descriptions, or messages
Label
Accessible labels that should always accompany inputs for proper form semantics
Select
Dropdown selection for choosing from predefined options instead of free text
Button
Often paired with inputs for submit actions, search triggers, or inline actions
API Reference
The Input component accepts all standard HTML input attributes plus these common props.
| Prop | Type | Default | Description |
|---|---|---|---|
| type | string | "text" | The type of input (text, email, password, number, tel, url, search, date, file, etc.). |
| placeholder | string | — | Placeholder text displayed when the input is empty. |
| value | string | — | The controlled value of the input. |
| defaultValue | string | — | The default value for uncontrolled usage. |
| disabled | boolean | false | When true, prevents user interaction. |
| readOnly | boolean | false | When true, the input value cannot be modified. |
| required | boolean | false | When true, the input must have a value for form submission. |
| aria-invalid | boolean | false | When true, displays error styling. |
| className | string | — | Additional CSS classes to apply. |