Skip to main content

​
Import

import { Input } from '@adoptaunabuelo/react-components';

​
Usage

<Input
  design="secondary"
  placeholder="Enter your email"
  error="Invalid email format"
  onChange={(e) => handleChange(e.target.value)}
/>

​
Props

​
design
'primary' | 'secondary' | 'third'
Visual design variant. Default is “secondary”.
  • primary: Compact input with gray background (40px height)
  • secondary: Floating label input with white background (56px height)
  • third: Underlined input with bottom border (34px height)
​
type
'text' | 'email' | 'date' | 'password' | 'time' | 'number'
Input type: determines keyboard type and validation on mobile devices. Default is “text”.
​
placeholder
string
Placeholder text. For design="secondary", animates as floating label on focus.
​
value
string | number | readonly string[]
Controlled input value.
​
defaultValue
string | number | readonly string[]
Uncontrolled default value.
​
error
string
Error message displayed below the input in red text with fade-in animation.
​
disabled
boolean
Disables the input and reduces opacity.
​
LeftContent
ReactElement
Custom React element to display on the left side of the input (e.g., icon, prefix).
​
containerStyle
CSSProperties
Custom CSS properties for the outer container wrapper.
​
style
CSSProperties
Custom CSS properties for the input container.
​
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.
Input accepts all standard HTML input attributes (name, id, autoComplete, maxLength, etc.) via ComponentPropsWithRef<"input">.

​
Examples

​
Primary Design (Compact)

<Input
  design="primary"
  placeholder="Search..."
  LeftContent={<SearchIcon />}
/>

​
Secondary Design (Floating Label)

<Input
  design="secondary"
  placeholder="Email address"
  type="email"
  error={emailError}
  onChange={(e) => setEmail(e.target.value)}
/>

​
Third Design (Underlined)

<Input
  design="third"
  placeholder="Full name"
  LeftContent={<UserIcon />}
/>

​
Design Variants

  • primary: Compact input with soft gray background, 40px height, 6px border radius
  • secondary: Modern floating label design, white background, 56px height, 12px border radius
  • third: Minimalist underlined input with bottom border only, 34px height

Build docs developers (and LLMs) love

Get started for freeTalk to us