Overview
The Input component provides a flexible text input field with support for various types, validation states, icons, and helper text.
Basic Usage
import { Input } from '@yourproject/components';
function Example() {
return <Input placeholder="Enter text..." />;
}
Text
Email
Password
Number
Search
<Input
type="text"
placeholder="Enter your name"
/>
<Input
type="password"
placeholder="Enter password"
/>
<Input
type="number"
placeholder="Enter amount"
min={0}
max={100}
/>
<Input
type="search"
placeholder="Search..."
/>
Sizes
<Input size="sm" placeholder="Small" />
<Input size="md" placeholder="Medium" />
<Input size="lg" placeholder="Large" />
The default size is md if not specified.
Validation States
Error State
<Input
error
errorMessage="This field is required"
placeholder="Email"
/>
Success State
<Input
success
successMessage="Email is available"
placeholder="Email"
/>
With Helper Text
<Input
placeholder="Username"
helperText="Must be 3-20 characters"
/>
Labels and Descriptions
<Input
label="Email Address"
placeholder="[email protected]"
helperText="We'll never share your email"
required
/>
Icons
Add icons to enhance the input’s visual context:
import { Input } from '@yourproject/components';
import { Search, Mail } from 'lucide-react';
function Example() {
return (
<>
<Input
leftIcon={<Search />}
placeholder="Search..."
/>
<Input
rightIcon={<Mail />}
placeholder="Email"
/>
</>
);
}
Props
HTML input type: text, email, password, number, search, tel, url, etc.
Input size: sm, md, or lg
Label text displayed above the input
Placeholder text shown when input is empty
Default value for uncontrolled input
Change event handler: (event: React.ChangeEvent<HTMLInputElement>) => void
Whether the input is in an error state
Error message to display below the input
Whether the input is in a success state
Success message to display below the input
Helper text displayed below the input
Whether the input is disabled
Whether the input is required
Makes the input expand to fill its container width
Icon to display on the left side of the input
Icon to display on the right side of the input
Additional CSS class names to apply
TypeScript Interface
interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
size?: 'sm' | 'md' | 'lg';
label?: string;
error?: boolean;
errorMessage?: string;
success?: boolean;
successMessage?: string;
helperText?: string;
fullWidth?: boolean;
leftIcon?: React.ReactNode;
rightIcon?: React.ReactNode;
className?: string;
}
Advanced Examples
import { Input } from '@yourproject/components';
import { useState } from 'react';
function Example() {
const [email, setEmail] = useState('');
const [error, setError] = useState(false);
const validateEmail = (value: string) => {
const isValid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value);
setError(!isValid && value.length > 0);
};
return (
<Input
type="email"
label="Email"
value={email}
onChange={(e) => {
setEmail(e.target.value);
validateEmail(e.target.value);
}}
error={error}
errorMessage="Please enter a valid email"
/>
);
}
import { Input } from '@yourproject/components';
import { useState } from 'react';
import { Eye, EyeOff } from 'lucide-react';
function Example() {
const [showPassword, setShowPassword] = useState(false);
return (
<Input
type={showPassword ? 'text' : 'password'}
label="Password"
placeholder="Enter password"
rightIcon={
<button onClick={() => setShowPassword(!showPassword)}>
{showPassword ? <EyeOff /> : <Eye />}
</button>
}
/>
);
}
Combine validation states with real-time feedback for better user experience.
Accessibility
- Properly associates labels with inputs using
htmlFor
- Supports ARIA attributes for error and helper text
- Keyboard navigable with standard tab order
- Screen reader compatible with descriptive labels