Form Inputs
Input fields for collecting user data with validation states and accessibility features.
Text Inputs
Standard text input fields with proper labeling and placeholder text.
<div>
<label for="text-input" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
Full Name
</label>
<input
type="text"
id="text-input"
name="fullname"
placeholder="Enter your full name"
class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white transition-colors"
>
</div>Email Input
Email input with built-in validation and appropriate keyboard on mobile devices.
<div>
<label for="email-input" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
Email Address
</label>
<input
type="email"
id="email-input"
name="email"
placeholder="you@example.com"
class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white transition-colors"
required
>
</div>Password Input
Password input with toggle visibility functionality.
<div>
<label for="password-input" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
Password
</label>
<div class="relative">
<input
type="password"
id="password-input"
name="password"
placeholder="Enter your password"
class="w-full px-3 py-2 pr-10 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white transition-colors"
>
<button
type="button"
class="absolute inset-y-0 right-0 pr-3 flex items-center"
onclick="togglePasswordVisibility('password-input', this)"
>
<svg class="h-5 w-5 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
</svg>
</button>
</div>
</div>Textarea
Multi-line text input for longer content like descriptions and comments.
<div>
<label for="textarea" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
Description
</label>
<textarea
id="textarea"
name="description"
rows="4"
placeholder="Enter a detailed description..."
class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white transition-colors resize-vertical"
></textarea>
</div>Number Input
Numeric input with step controls and validation.
<div>
<label for="number-input" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
Quantity
</label>
<input
type="number"
id="number-input"
name="quantity"
min="1"
max="100"
step="1"
value="1"
class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white transition-colors"
>
</div>Input with Icons
Input fields enhanced with icons for better visual context.
<div>
<label for="search-input" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
Search
</label>
<div class="relative">
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<svg class="h-5 w-5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
</svg>
</div>
<input
type="text"
id="search-input"
placeholder="Search..."
class="w-full pl-10 pr-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white transition-colors"
>
</div>
</div>Validation States
Input fields with validation feedback using colors and messages.
Username is available!
Please enter a valid email address.
This field requires attention.
This field is not editable.