Back to all snippets
Library/Tailwind CSS/Form Input Components
htmlbeginnerforminputselecttextareavalidationaccessibility

How to implement Form Input Components in Html

Polished text input, select, and textarea components with focus states using Tailwind CSS

Quick Answer

Tailwind CSS form inputs use border border-gray-300 rounded-lg px-3.5 py-2.5 with focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 for a polished, accessible focus state.

Code Snippet

1<!-- Text input with label -->
2<div class="space-y-1.5">
3  <label for="email" class="block text-sm font-medium text-gray-700">Email address</label>
4  <input id="email" type="email" placeholder="you@example.com"
5    class="w-full px-3.5 py-2.5 text-sm border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 placeholder:text-gray-400 transition" />
6</div>
7
8<!-- Input with error state -->
9<div class="space-y-1.5">
10  <label for="username" class="block text-sm font-medium text-gray-700">Username</label>
11  <input id="username" type="text" value="taken_name"
12    class="w-full px-3.5 py-2.5 text-sm border border-red-400 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-red-400 bg-red-50 text-red-900 transition" />
13  <p class="text-xs text-red-600">This username is already taken.</p>
14</div>
15
16<!-- Select dropdown -->
17<div class="space-y-1.5">
18  <label for="role" class="block text-sm font-medium text-gray-700">Role</label>
19  <select id="role" class="w-full px-3.5 py-2.5 text-sm border border-gray-300 rounded-lg shadow-sm bg-white focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition">
20    <option value="">Select a role...</option>
21    <option value="developer">Developer</option>
22    <option value="designer">Designer</option>
23    <option value="manager">Manager</option>
24  </select>
25</div>
26
27<!-- Textarea -->
28<div class="space-y-1.5">
29  <label for="message" class="block text-sm font-medium text-gray-700">Message</label>
30  <textarea id="message" rows="4" placeholder="Write your message here..."
31    class="w-full px-3.5 py-2.5 text-sm border border-gray-300 rounded-lg shadow-sm resize-y focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 placeholder:text-gray-400 transition"></textarea>
32</div>
33
34<!-- Submit button -->
35<button type="submit" class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-semibold py-2.5 px-6 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 transition-colors">Send message</button>

What is Form Input Components?

Form inputs are among the most critical UI elements — poor styling leads to confusing user experiences. This collection of Tailwind CSS form components includes a standard text input with label, a select dropdown, a textarea, and error/success validation states. All components use consistent focus rings and spacing for a cohesive design.

How It Works

  1. 1border border-gray-300 rounded-lg shadow-sm defines the base input shape and border
  2. 2focus:outline-none removes the browser default outline; focus:ring-2 focus:ring-indigo-500 replaces it with a branded ring
  3. 3The error state swaps border-gray-300 for border-red-400 and adds bg-red-50 plus a helper <p> text below
  4. 4All inputs use w-full so they stretch to fill whatever column or container they are placed in

Common Use Cases

  • Contact forms - Name, email, and message fields with clear focus states
  • Sign-up flows - Email, password, and role selection inputs
  • Settings pages - Profile update forms with inline validation feedback
  • Search filters - Dropdown selects for filtering and sorting data

Key Benefits

  • Consistent focus ring styling across all input types
  • Accessible labels with htmlFor association
  • Error states with red ring and message for validation feedback
  • Fully customisable with Tailwind color and spacing tokens

Common Mistakes to Avoid

  • Using focus:outline-none without a focus:ring replacement hides the focus indicator and fails WCAG 2.1 AA
  • Not pairing each <label> with its input via matching for and id attributes, breaking screen reader association
  • Forgetting autocomplete='email' or autocomplete='current-password' on common fields, hurting mobile UX

Quick Tips

  • Click the "Copy" button above to copy the code to your clipboard
  • This code is production-ready and can be used in your projects immediately
  • Check out related snippets below for more html examples

Frequently Asked Questions

How do I add a leading icon inside a Tailwind input?

Wrap the input in a relative div. Place the icon in an absolute left-3 top-1/2 -translate-y-1/2 span, then add pl-10 to the input so the placeholder text starts after the icon.

How do I style Tailwind form inputs for dark mode?

Add dark: variant classes alongside light ones: dark:bg-gray-800 dark:border-gray-600 dark:text-white dark:placeholder-gray-400 dark:focus:ring-indigo-400.

Related Snippets

html
beginner
Card Component
Versatile card component with image, badge, and hover effects using Tailwind CSS
cardcomponenthover+2

About This Html Code Snippet

This free html code snippet for form input components is production-ready and copy-paste friendly. Whether you are building a web app, API, or frontend interface, this beginner-level example will help you implement form input components quickly and correctly.

All snippets in the Snippetly library follow html best practices and are tested for real-world use. You can adapt this code to work with React, Vue, Node.js, or any project that uses html.

Tags: form, input, select, textarea, validation, accessibility  | Language: html  | Difficulty: beginner  | Category: Tailwind CSS

Build Your Own Snippet Library

Organise your team's code snippets with Snippetly. Share knowledge and boost productivity across your organisation.

Get Started FreeBrowse More Snippets