Input Component

A flexible input component supporting various types, sizes, and validation states for form interactions.

Overview

The Input component provides a consistent interface for text input across the application. It supports various input types, sizes, and validation states with built-in styling and accessibility features.

Usage

Basic Import

---
import Input from '../ui/atoms/Input.astro';
---

<Input placeholder="Enter text" />

With Props

<Input 
  type="email" 
  placeholder="your@email.com"
  size="lg"
  variant="outline"
  required
/>

Input Types

Text

Email

Password

Number

Tel

URL

Variants

Default

Standard input styling with subtle background.

Outline

Outlined input with transparent background.

Sizes

Props

Prop Type Default Description
type string "text" HTML input type: "text", "email", "password", "number", "tel", "url"
variant string "default" Input style variant: "default", "outline"
size string "md" Input size: "sm", "md", "lg"
placeholder string undefined Placeholder text
value string undefined Input value
name string undefined Input name attribute
id string undefined Input ID attribute
required boolean false Makes the input required
disabled boolean false Disables the input
class string undefined Additional CSS classes

Examples

Contact Form

<Input type="text" placeholder="Full Name" required />
<Input type="email" placeholder="Email Address" required />
<Input type="tel" placeholder="Phone Number" />

Search Input

<Input 
  type="text" 
  placeholder="Search projects..." 
  size="lg"
  variant="outline"
/>

Login Form

<Input 
  type="email" 
  placeholder="Email" 
  name="email"
  id="email"
  required 
/>
<Input 
  type="password" 
  placeholder="Password" 
  name="password"
  id="password"
  required 
/>

Best Practices

Do

  • Use appropriate input types for better mobile experience
  • Provide clear and helpful placeholder text
  • Use consistent sizing within forms
  • Include proper labels and accessibility attributes
  • Use required attribute for mandatory fields

Don't

  • Use placeholder text as the only label
  • Make inputs too narrow for expected content
  • Use generic placeholders like "Enter text"
  • Override focus styles that break accessibility
  • Use wrong input types (e.g., text for email)