Input
A form control that allows users to enter and edit text or numeric data.
Overview
The Input component is a fundamental UI element used to collect user data. It provides a way for users to enter text, numbers, and other information into forms and interfaces.
Our Input component is built with accessibility in mind and follows WAI-ARIA best practices. It supports various states, types, and can be easily customized to fit your design needs.
Basic Usage
The default Input component provides a clean, accessible text input field.
Input Types
Input supports various HTML input types to collect different kinds of data.
Examples
With Icons
Enhance inputs with icons for better visual communication.
Custom Sizes
Customize input sizes using Tailwind CSS classes.
Input States
Inputs can have different states to indicate their current status.
This field is required
Input with Button
Combine inputs with buttons for search fields, forms, and more.
Specialized Inputs
Create specialized inputs for specific data formats.
API Reference
The Input component extends the HTML input element with additional styling.
| Prop | Type | Default | Description |
|---|---|---|---|
| type | HTML input types | 'text' | The type of input field. |
| placeholder | string | undefined | Placeholder text for the input. |
| disabled | boolean | false | When true, the input will be disabled. |
| readOnly | boolean | false | When true, the input will be read-only. |
| className | string | undefined | Additional CSS classes to add to the input. |
The Input component also accepts all the props of the HTML input element.
Accessibility
The Input component follows accessibility best practices to ensure usability for all users:
Proper Labeling
Always associate inputs with labels using the htmlFor attribute or by nesting inputs within label elements.
Focus States
Clearly visible focus states are provided for keyboard navigation.
Error Messaging
Use aria-invalid and aria-describedby to connect inputs with error messages.
Disabled States
When disabled, the input communicates its unavailable state to assistive technologies.
Accessibility Tip
When using icons with inputs, ensure they have appropriate ARIA labels or are purely decorative. For inputs that accept specific formats (like credit cards or dates), provide clear instructions about the expected format.
Best Practices
Follow these guidelines to ensure effective use of the Input component:
Input Design
Do
- Use clear, concise placeholder text
- Provide visible labels for inputs
- Use appropriate input types (email, password, etc.)
- Indicate required fields clearly
- Provide helpful error messages
Don't
- Use placeholder text as the only label
- Create inputs without sufficient contrast
- Use vague error messages
- Make inputs too small to tap on mobile devices
- Use inputs without proper validation
Form Layout
Do
- Group related inputs together
- Align labels and inputs consistently
- Use appropriate spacing between form elements
- Provide clear submit and cancel actions
- Use fieldsets and legends for groups of inputs
Don't
- Create overly long forms without sections
- Mix different label alignments in the same form
- Place inputs too close together
- Use inconsistent input widths without purpose
- Hide important form controls