Input

An accessible input component with built-in support for labels, error messages, and helper text.

Usage

import { Input } from '@/components/Input';

export default function Example() {
  return (
    <Input
      label="Email"
      type="email"
      placeholder="you@example.com"
    />
  );
}

With Label

Username

<Input
  label="Username"
  placeholder="Enter your username"
/>

With Helper Text

We'll never share your email

<Input
  label="Email"
  type="email"
  placeholder="you@example.com"
  helperText="We'll never share your email"
/>

With Error

Password

Password must be at least 8 characters

<Input
  label="Password"
  type="password"
  error="Password must be at least 8 characters"
/>

Input Types

All standard HTML input types are supported:

Text

Password

Number

<Input type="text" label="Text" />
<Input type="email" label="Email" />
<Input type="password" label="Password" />
<Input type="number" label="Number" />
<Input type="tel" label="Phone" />
<Input type="url" label="URL" />
<Input type="date" label="Date" />

Disabled State

Disabled Input

<Input
  label="Disabled Input"
  value="Cannot edit"
  disabled
/>

API Reference

Props

Prop	Type	Default	Description
label	string	-	Input label text
error	string	-	Error message to display
helperText	string	-	Helper text below input
disabled	boolean	false	Whether the input is disabled
...props	InputHTMLAttributes	-	All standard input HTML attributes

Accessibility

The Input component includes:

Proper label association via htmlFor and id
ARIA attributes for error states
Keyboard navigation support
Screen reader friendly error messages