Components
Tailwind CSS Input Fields - Madhuranjan UI
Explore a complete collection of input field components built with Tailwind CSS. From basic fields to advanced inputs with floating labels, icons, and validation these inputs are fully responsive and theme-aware.
Simple Input Field
This is the most basic input field for general text entry. It's styled with clean borders and works out of the box in both light and dark themes.
1<div class="flex items-center justify-center p-5">
2 <div class="w-full max-w-md">
3 <label for="simple-input" class="mb-1 block text-sm font-medium text-gray-900 dark:text-gray-100"> Your Name </label>
4 <input type="text" id="simple-input" placeholder="Enter your name" class="block w-full rounded-lg border border-gray-300 bg-white px-4 py-2 text-sm text-gray-900 placeholder-gray-400 transition focus:border-transparent focus:ring-2 focus:ring-violet-500 focus:outline-none dark:border-gray-600 dark:bg-gray-800 dark:text-white dark:placeholder-gray-500 dark:focus:ring-blue-500" />
5 </div>
6</div>
7Input Height Variants
Tailwind allows you to easily scale input heights using padding. Choose from small to extra large based on your design needs.
1<div class="p-2 md:p-5 flex justify-center items-center">
2 <div class="w-full max-w-md space-y-4">
3 <!-- Small Input -->
4 <div>
5 <label for="input-sm" class="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300"> Small Input </label>
6 <input type="text" id="input-sm" placeholder="Small" class="block w-full rounded-md border border-gray-300 bg-white px-3 py-1.5 text-sm text-gray-900 placeholder-gray-400 transition focus:border-transparent focus:ring-2 focus:ring-violet-500 focus:outline-none dark:border-gray-600 dark:bg-gray-800 dark:text-white dark:placeholder-gray-500 dark:focus:ring-blue-500" />
7 </div>
8
9 <!-- Medium Input -->
10 <div>Inputs with Username and Password Icons
These input fields include icons for visual clarity and improved usability perfect for login forms and authentication UIs.
1<div class="p-2 flex justify-center items-center md:p-5">
2 <div class="w-full max-w-md space-y-4">
3 <!-- Username Input with Icon -->
4 <div>
5 <label for="username" class="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300"> Username </label>
6 <div class="relative">
7 <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500 dark:text-gray-400">
8 <!-- Heroicons: User -->
9 <svg class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
10 <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6.75a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.5 20.25a8.25 8.25 0 1115 0H4.5z" />Disabled Input Fields
Inputs that are disabled are styled with muted colors and prevent any user interaction.
1<div class="flex justify-center items-center p-2 md:p-5">
2 <div class="w-full max-w-md space-y-4">
3 <!-- Disabled Text Input -->
4 <div>
5 <label for="disabled-text" class="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300"> Disabled Text Input </label>
6 <input type="text" id="disabled-text" placeholder="Can't edit this" disabled class="block w-full cursor-not-allowed rounded-md border border-gray-300 bg-gray-100 px-4 py-2 text-sm text-gray-500 placeholder-gray-400 transition dark:border-gray-600 dark:bg-gray-700 dark:text-gray-400 dark:placeholder-gray-500" />
7 </div>
8
9 <!-- Disabled Password Input -->
10 <div>Validation Input Fields
These inputs support success and error states using Tailwind’s ring and text utilities.
Username is available.
Please enter a valid email address.
1<div class="flex justify-center items-center p-2 md:p-5">
2 <div class="w-full max-w-md space-y-6">
3 <!-- Success Input -->
4 <div>
5 <label for="username-valid" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
6 Username
7 </label>
8 <div class="relative">
9 <input
10 type="text"Floating Label Input Fields
Floating labels create a modern, material-style experience that shifts the label above the field on focus.
1<div class="flex items-center justify-center p-2 md:p-5">
2 <div class="w-full max-w-md space-y-6">
3 <!-- Username -->
4 <div class="relative">
5 <input type="text" id="floating-username" placeholder=" " class="peer block w-full appearance-none rounded-md border border-gray-300 bg-white px-4 pt-5 pb-2 text-sm text-gray-900 placeholder-transparent focus:border-violet-500 focus:ring-2 focus:ring-violet-500 focus:outline-none dark:border-gray-600 dark:bg-gray-800 dark:text-white dark:focus:border-blue-500 dark:focus:ring-blue-500" />
6 <label for="floating-username" class="absolute top-2.5 left-3 z-10 origin-[0] scale-75 transform text-sm text-gray-500 transition-all duration-200 peer-placeholder-shown:top-3.5 peer-placeholder-shown:left-4 peer-placeholder-shown:scale-100 peer-placeholder-shown:text-gray-400 peer-focus:top-2.5 peer-focus:left-3 peer-focus:scale-75 peer-focus:text-violet-500 dark:text-gray-400 dark:peer-placeholder-shown:text-gray-500 dark:peer-focus:text-blue-400"> Username </label>
7 </div>
8
9 <!-- Email -->
10 <div class="relative">Input Fields with Helper Text
These fields include contextual help beneath the input to guide users on what to enter.
We'll never share your email with anyone else.
Must be at least 8 characters.
1<div class="flex items-center justify-center p-2 md:p-5">
2<div class="w-full max-w-md space-y-6">
3 <!-- Email Input with Helper Text -->
4 <div>
5 <label for="helper-email" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
6 Email address
7 </label>
8 <input
9 type="email"
10 id="helper-email"Pilled Input Fields
These pill-shaped inputs use full border-radius styling for a softer, more modern look.
1<div class="flex items-center justify-center p-2 md:p-5">
2<div class="w-full max-w-md space-y-6">
3 <!-- Pill Input -->
4 <div>
5 <label for="pill-input" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
6 Search
7 </label>
8 <input
9 type="text"
10 id="pill-input"Search Inputs with Icon and Button
Search inputs with embedded icons and right-aligned action buttons. Perfect for forms and dashboards.
1<div class="flex flex-col items-center justify-center space-y-3 p-2 md:p-5">
2 <div class="w-full max-w-md">
3 <div class="relative">
4 <!-- Search Icon -->
5 <span class="absolute inset-y-0 left-0 flex items-center pl-4 text-gray-500 dark:text-gray-400">
6 <svg class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
7 <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-4.35-4.35m1.75-4.4a7 7 0 11-14 0 7 7 0 0114 0z" />
8 </svg>
9 </span>
10Number Input Field
Accept numeric input with built-in browser support for incrementing values.
1<div class="flex justify-center items-center p-2 md:p-5">
2 <div class="mb-6 w-full max-w-md">
3 <label for="number-input" class="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300"> Quantity </label>
4 <input type="number" id="number-input" placeholder="Enter a number" class="block w-full rounded-md border border-gray-300 bg-white px-4 py-2 text-sm text-gray-900 placeholder-gray-400 focus:border-transparent focus:ring-2 focus:ring-violet-500 focus:outline-none dark:border-gray-600 dark:bg-gray-800 dark:text-white dark:placeholder-gray-500 dark:focus:ring-blue-500" />
5 </div>
6</div>
7Telephone Input Field
Use the type="tel" input for capturing user phone numbers.
1<div class="flex justify-center items-center p-2 md:p-5">
2 <div class="w-full max-w-md mb-6">
3 <label for="tel-input" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
4 Phone Number
5 </label>
6 <input
7 type="tel"
8 id="tel-input"
9 placeholder="+1 234 567 8900"
10 class="block w-full rounded-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 px-4 py-2 text-sm text-gray-900 dark:text-white placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-violet-500 dark:focus:ring-blue-500 focus:border-transparent"URL Input Field
The URL input is ideal for collecting links and validates domain formats by default.
1<div class="flex justify-center items-center p-2 md:p-5">
2 <div class="w-full max-w-md mb-6">
3 <label for="url-input" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
4 Website
5 </label>
6 <input
7 type="url"
8 id="url-input"
9 placeholder="https://example.com"
10 class="block w-full rounded-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 px-4 py-2 text-sm text-gray-900 dark:text-white placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-violet-500 dark:focus:ring-blue-500 focus:border-transparent"