Input.

The membrane of user intent. More than a text box, it handles the delicate balance between data entry, validation feedback, and keyboard navigation flow.

import { Input } from "@/components/ui/input"

Configuration

Context

State

Welcome back

Enter your email to sign in to your account

We'll email you a magic link.

Live Regex Validation

Semantic Validation

We don't just change the border color. The `error` prop automatically injects `aria-invalid='true'`, ensuring that screen reader users are immediately aware of the validation state without manual wiring.

Composition Ready

Inputs are rarely alone. This component is designed to sit comfortably inside relative containers with absolute positioned icons (like Search or Mail) without z-index wars.

SignUpForm.tsx

<div className="space-y-2">
  <Label htmlFor="email">Email</Label>
  <div className="relative">
     <Input 
       id="email" 
       type="email" 
       placeholder="m@example.com"
       error={!!errors.email} 
       className="pl-9"
     />
     <Mail className="absolute left-3 top-2.5 h-4 w-4 text-muted-foreground" />
  </div>
  {errors.email && (
    <span className="text-sm text-destructive">
      {errors.email.message}
    </span>
  )}
</div>