Input

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..." />;
}

Input Types

The Input component supports all standard HTML input types:

Text
Email
Password
Number
Search

<Input 
  type="text" 
  placeholder="Enter your name" 
/>

<Input 
  type="email" 
  placeholder="email@example.com" 
/>

<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@example.com"
  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

string

default:"text"

HTML input type: text, email, password, number, search, tel, url, etc.

string

default:"md"

Input size: sm, md, or lg

string

Label text displayed above the input

string

Placeholder text shown when input is empty

string

Controlled input value

string

Default value for uncontrolled input

function

Change event handler: (event: React.ChangeEvent<HTMLInputElement>) => void

boolean

default:"false"

Whether the input is in an error state

string

Error message to display below the input

boolean

default:"false"

Whether the input is in a success state

string

Success message to display below the input

string

Helper text displayed below the input

boolean

default:"false"

Whether the input is disabled

boolean

default:"false"

Whether the input is required

boolean

default:"false"

Makes the input expand to fill its container width

ReactNode

Icon to display on the left side of the input

ReactNode

Icon to display on the right side of the input

string

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

Controlled Input with Validation

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"
    />
  );
}

Password Input with Toggle

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

Overview

UI Components

Layout

Overview

Basic Usage

Input Types

Sizes

Validation States

Error State

Success State

With Helper Text

Labels and Descriptions

Icons

Props

TypeScript Interface

Advanced Examples

Controlled Input with Validation

Password Input with Toggle

Accessibility

​Overview

​Basic Usage

​Input Types

​Sizes

​Validation States

​Error State

​Success State

​With Helper Text

​Labels and Descriptions

​Icons

​Props

​TypeScript Interface

​Advanced Examples

​Controlled Input with Validation

​Password Input with Toggle

​Accessibility

Overview

Basic Usage

Input Types

Sizes

Validation States

Error State

Success State

With Helper Text

Labels and Descriptions

Icons

Props

TypeScript Interface

Advanced Examples

Controlled Input with Validation

Password Input with Toggle

Accessibility