Text input component with three visual design variants. Supports all native HTML input attributes plus custom styling and error handling.
Import
import { Input } from '@adoptaunabuelo/react-components';
Usage
import { Input } from '@adoptaunabuelo/react-components';
function App() {
return (
<Input
design="primary"
placeholder="Enter your name"
/>
);
}
Design Variants
Primary
Compact input with subtle background color. Height: 40px with 6px border radius.
- Background: Neutral soft color
- Focus: White background with 1px hard border
- Padding: 0px 8px
Secondary (Default)
Larger input with floating label animation. Height: 56px with 12px border radius.
- Background: White
- Focus: 2px medium border
- Padding: 0px 16px
- Animated placeholder that moves up on focus
Third
Alternative design variant with custom styling.
Props
design
'primary' | 'secondary' | 'third'
default:"secondary"
Visual variant of the input. Each design has different sizes, borders, and interaction states.
type
'text' | 'email' | 'date' | 'password' | 'time' | 'number'
default:"text"
Input type that determines keyboard type and validation on mobile devices.
Placeholder text displayed in the input. For secondary design, this becomes a floating label.
Error message displayed below the input in red text with fade-in animation.
Custom React element to display on the left side of the input (e.g., icon, prefix).
Custom CSS properties for the outer container wrapper.
Disables the input and reduces opacity.
Uncontrolled input default value.
onChange
(e: ChangeEvent<HTMLInputElement>) => void
Callback fired when input value changes.
onFocus
(e: FocusEvent<HTMLInputElement>) => void
Callback fired when input receives focus.
onBlur
(e: FocusEvent<HTMLInputElement>) => void
Callback fired when input loses focus.
Additional Props
The Input component extends all native HTML input attributes (maxLength, minLength, pattern, required, autoComplete, autoFocus, etc.).
Examples
import { Input } from '@adoptaunabuelo/react-components';
import { useState } from 'react';
function App() {
const [value, setValue] = useState('');
return (
<Input
design="secondary"
placeholder="Name"
value={value}
onChange={(e) => setValue(e.target.value)}
/>
);
}
import { Input } from '@adoptaunabuelo/react-components';
import { useState } from 'react';
function App() {
const [age, setAge] = useState('');
const [error, setError] = useState('');
const validateAge = (value: string) => {
const num = parseInt(value);
if (num < 0 || num > 120) {
setError('Please enter a valid age');
} else {
setError('');
}
};
return (
<Input
design="secondary"
placeholder="Age"
type="number"
value={age}
error={error}
onChange={(e) => {
setAge(e.target.value);
validateAge(e.target.value);
}}
/>
);
}
With Custom Styling
<Input
design="primary"
placeholder="Custom input"
containerStyle={{ maxWidth: '400px' }}
style={{ fontSize: '16px', fontWeight: 500 }}
/>
