Skip to main content

​
Overview

The Input component provides a complete form input solution with built-in label, error handling, and accessibility features.

​
Import

import { Input } from '@abdalkader/component-library';

​
Basic Usage

<Input
  label="Email"
  type="email"
  placeholder="Enter your email"
/>

​
With Label

<Input
  label="Full Name"
  placeholder="John Doe"
  required
/>

​
Input Types

<Input label="Username" type="text" />

​
Error State

<Input
  label="Email"
  type="email"
  value="invalid-email"
  error={true}
  errorMessage="Please enter a valid email address"
/>

​
Helper Text

<Input
  label="Password"
  type="password"
  helperText="Must be at least 8 characters long"
/>

​
Required Field

<Input
  label="Email"
  type="email"
  required
/>

​
Controlled Component

function MyForm() {
  const [email, setEmail] = useState('');
  
  return (
    <Input
      label="Email"
      type="email"
      value={email}
      onChange={(e) => setEmail(e.target.value)}
    />
  );
}

​
Form Validation

function ValidatedInput() {
  const [email, setEmail] = useState('');
  const [error, setError] = useState(false);
  
  const validate = (value: string) => {
    const isValid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value);
    setError(!isValid && value.length > 0);
  };
  
  return (
    <Input
      label="Email"
      type="email"
      value={email}
      onChange={(e) => {
        setEmail(e.target.value);
        validate(e.target.value);
      }}
      error={error}
      errorMessage={error ? 'Invalid email address' : undefined}
      required
    />
  );
}

​
Accessibility

The Input component includes proper ARIA attributes:
  • Automatic ID generation for label association
  • aria-invalid for error states
  • aria-describedby for helper text and errors
  • aria-required for required fields

​
Props

​
label
string
Label text for the input
​
type
'text' | 'email' | 'password' | 'number' | 'tel' | 'url'
default:"text"
HTML input type
​
placeholder
string
Placeholder text
​
value
string
Input value (controlled)
​
defaultValue
string
Default value (uncontrolled)
​
onChange
(e: ChangeEvent) => void
Change event handler
​
error
boolean
default:"false"
Error state
​
errorMessage
string
Error message to display
​
helperText
string
Helper text below input
​
required
boolean
default:"false"
Marks field as required
​
disabled
boolean
default:"false"
Disables the input

​
Examples

​
Login Form

function LoginForm() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  
  return (
    <form>
      <Input
        label="Email"
        type="email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        required
      />
      <Input
        label="Password"
        type="password"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
        required
      />
      <Button type="submit">Sign In</Button>
    </form>
  );
}

​
Search Input

<Input
  type="text"
  placeholder="Search..."
  aria-label="Search"
/>

Button Component

Button component

API Reference

Complete prop types