Input Component

A flexible input component with label, validation states, and helper text support. Built with accessibility in mind.

Basic Input

Email Address

<Input placeholder="Enter your name" />
<Input 
  label="Email Address" 
  type="email" 
  placeholder="you@example.com" 
/>

Input Types

Text

Password

Number

<Input label="Text" type="text" placeholder="Enter text" />
<Input label="Email" type="email" placeholder="you@example.com" />
<Input label="Password" type="password" placeholder="Enter password" />
<Input label="Number" type="number" placeholder="Enter number" />

Required Fields

Full Name*

Email*

<Input label="Full Name" required placeholder="John Doe" />
<Input label="Email" type="email" required placeholder="you@example.com" />

With Helper Text

Username

Choose a unique username for your account

Website

Include the full URL with https://

<Input 
  label="Username" 
  placeholder="johndoe123"
  helperText="Choose a unique username for your account"
/>
<Input 
  label="Website" 
  type="url"
  placeholder="https://example.com"
  helperText="Include the full URL with https://"
/>

Error States

Please enter a valid email address

Password

Password must be at least 8 characters

<Input 
  label="Email" 
  type="email"
  defaultValue="invalid-email"
  error="Please enter a valid email address"
/>
<Input 
  label="Password" 
  type="password"
  error="Password must be at least 8 characters"
  helperText="Use a mix of letters, numbers, and symbols"
/>

Disabled State

Disabled Input

Disabled Empty

<Input label="Disabled Input" disabled defaultValue="Cannot edit this" />
<Input label="Disabled Empty" disabled placeholder="Disabled placeholder" />

Custom Styling

Custom Classes

<Input 
  label="Custom Classes" 
  class="bg-blue-50 border-blue-300"
  placeholder="Custom styled input"
/>

Props Reference

Prop	Type	Default	Description
label	string	undefined	Label text displayed above the input
error	string	undefined	Error message to display
helperText	string	undefined	Helper text displayed below the input
type	'text' \| 'email' \| 'password' \| 'number' \| ...	'text'	HTML input type
required	boolean	false	Whether the field is required
disabled	boolean	false	Whether the input is disabled
className	string	undefined	Additional CSS classes