Tailwind CSS Form Components
Text inputs, textareas, select dropdowns, checkboxes and a CSS-only toggle switch — styled consistently across 10 design aesthetics.
55 components · live preview · copy as HTML or JSX · free for commercial use
Base forms (5)
Text Input
Forms
<div class="max-w-sm">
<label class="block text-xs font-semibold text-slate-600 mb-1">Email address</label>
<input type="email" placeholder="you@example.com" class="w-full px-3 py-2 rounded-xl border border-slate-300 text-sm text-slate-900 placeholder:text-slate-400 focus:outline-none focus:ring-2 focus:ring-indigo-400" />
</div>Textarea
Forms
<div class="max-w-sm">
<label class="block text-xs font-semibold text-slate-600 mb-1">Message</label>
<textarea rows="3" placeholder="Type your message…" class="w-full px-3 py-2 rounded-xl border border-slate-300 text-sm text-slate-900 placeholder:text-slate-400 focus:outline-none focus:ring-2 focus:ring-indigo-400"></textarea>
</div>Select Dropdown
Forms
<div class="max-w-sm">
<label class="block text-xs font-semibold text-slate-600 mb-1">Country</label>
<select class="w-full px-3 py-2 rounded-xl border border-slate-300 text-sm text-slate-900 focus:outline-none focus:ring-2 focus:ring-indigo-400">
<option>United States</option>
<option>South Korea</option>
<option>Japan</option>
</select>
</div>Checkbox
Forms
<label class="inline-flex items-center gap-2 cursor-pointer">
<input type="checkbox" class="w-4 h-4 rounded border-slate-300 text-indigo-600 focus:ring-indigo-400" />
<span class="text-sm text-slate-700">I agree to the terms</span>
</label>Toggle Switch
Forms
Uses Tailwind's peer/peer-checked variants — no JavaScript required.
<label class="inline-flex items-center cursor-pointer">
<input type="checkbox" class="peer sr-only" />
<div class="w-11 h-6 rounded-full bg-slate-200 peer-checked:bg-indigo-600 transition-colors relative">
<div class="absolute top-0.5 left-0.5 w-5 h-5 rounded-full bg-white shadow-sm transition-transform peer-checked:translate-x-5"></div>
</div>
</label>Minimal forms
Text Input
Minimal · Forms
<input type="email" placeholder="you@example.com" class="w-48 px-3 py-2 rounded-lg text-sm border border-slate-200 text-slate-900 placeholder:text-slate-400 focus:ring-1 focus:ring-slate-400" />Textarea
Minimal · Forms
<textarea rows="3" placeholder="Type your message…" class="w-48 px-3 py-2 rounded-lg text-sm border border-slate-200 text-slate-900 placeholder:text-slate-400 focus:ring-1 focus:ring-slate-400"></textarea>Select Dropdown
Minimal · Forms
<select class="w-48 px-3 py-2 rounded-lg text-sm border border-slate-200 text-slate-900 placeholder:text-slate-400 focus:ring-1 focus:ring-slate-400">
<option>United States</option>
<option>South Korea</option>
<option>Japan</option>
</select>Checkbox
Minimal · Forms
<label class="inline-flex items-center gap-2 cursor-pointer">
<input type="checkbox" class="w-4 h-4 rounded text-indigo-600 focus:ring-slate-400" />
<span class="text-sm text-slate-900">I agree to the terms</span>
</label>Toggle Switch
Minimal · Forms
Uses Tailwind's peer/peer-checked variants — no JavaScript required.
<label class="inline-flex items-center cursor-pointer">
<input type="checkbox" class="peer sr-only" />
<div class="w-11 h-6 rounded-full bg-slate-200 peer-checked:bg-slate-900 transition-colors relative">
<div class="absolute top-0.5 left-0.5 w-5 h-5 rounded-full bg-white shadow-sm transition-transform peer-checked:translate-x-5"></div>
</div>
</label>Neumorphism forms
Text Input
Neumorphism · Forms
<div class="bg-[#e0e5ec] p-6 rounded-2xl inline-block">
<input type="email" placeholder="you@example.com" class="w-48 px-3 py-2 rounded-xl text-sm bg-[#e0e5ec] text-slate-600 placeholder:text-slate-400 shadow-[inset_4px_4px_8px_#a3b1c6,inset_-4px_-4px_8px_#ffffff] focus:outline-none" />
</div>Textarea
Neumorphism · Forms
<div class="bg-[#e0e5ec] p-6 rounded-2xl inline-block">
<textarea rows="3" placeholder="Type your message…" class="w-48 px-3 py-2 rounded-xl text-sm bg-[#e0e5ec] text-slate-600 placeholder:text-slate-400 shadow-[inset_4px_4px_8px_#a3b1c6,inset_-4px_-4px_8px_#ffffff] focus:outline-none"></textarea>
</div>Select Dropdown
Neumorphism · Forms
<div class="bg-[#e0e5ec] p-6 rounded-2xl inline-block">
<select class="w-48 px-3 py-2 rounded-xl text-sm bg-[#e0e5ec] text-slate-600 placeholder:text-slate-400 shadow-[inset_4px_4px_8px_#a3b1c6,inset_-4px_-4px_8px_#ffffff] focus:outline-none">
<option>United States</option>
<option>South Korea</option>
<option>Japan</option>
</select>
</div>Checkbox
Neumorphism · Forms
<div class="bg-[#e0e5ec] p-6 rounded-2xl inline-block">
<label class="inline-flex items-center gap-2 cursor-pointer">
<input type="checkbox" class="w-4 h-4 rounded text-slate-600" />
<span class="text-sm text-slate-600">I agree to the terms</span>
</label>
</div>Toggle Switch
Neumorphism · Forms
Uses Tailwind's peer/peer-checked variants — no JavaScript required.
<div class="bg-[#e0e5ec] p-6 rounded-2xl inline-block">
<label class="inline-flex items-center cursor-pointer">
<input type="checkbox" class="peer sr-only" />
<div class="w-11 h-6 rounded-full bg-[#e0e5ec] shadow-[inset_3px_3px_6px_#a3b1c6,inset_-3px_-3px_6px_#ffffff] peer-checked:bg-[#c9d6e3] transition-colors relative">
<div class="absolute top-0.5 left-0.5 w-5 h-5 rounded-full bg-white shadow-sm transition-transform peer-checked:translate-x-5"></div>
</div>
</label>
</div>Glassmorphism forms
Text Input
Glassmorphism · Forms
<div class="bg-gradient-to-br from-purple-500 to-blue-500 p-6 rounded-2xl inline-block">
<input type="email" placeholder="you@example.com" class="w-48 px-3 py-2 rounded-xl text-sm bg-white/20 backdrop-blur-md border border-white/30 text-white placeholder:text-white/70 focus:outline-none" />
</div>Textarea
Glassmorphism · Forms
<div class="bg-gradient-to-br from-purple-500 to-blue-500 p-6 rounded-2xl inline-block">
<textarea rows="3" placeholder="Type your message…" class="w-48 px-3 py-2 rounded-xl text-sm bg-white/20 backdrop-blur-md border border-white/30 text-white placeholder:text-white/70 focus:outline-none"></textarea>
</div>Select Dropdown
Glassmorphism · Forms
<div class="bg-gradient-to-br from-purple-500 to-blue-500 p-6 rounded-2xl inline-block">
<select class="w-48 px-3 py-2 rounded-xl text-sm bg-white/20 backdrop-blur-md border border-white/30 text-white placeholder:text-white/70 focus:outline-none">
<option>United States</option>
<option>South Korea</option>
<option>Japan</option>
</select>
</div>Checkbox
Glassmorphism · Forms
<div class="bg-gradient-to-br from-purple-500 to-blue-500 p-6 rounded-2xl inline-block">
<label class="inline-flex items-center gap-2 cursor-pointer">
<input type="checkbox" class="w-4 h-4 rounded text-white" />
<span class="text-sm text-white">I agree to the terms</span>
</label>
</div>Toggle Switch
Glassmorphism · Forms
Uses Tailwind's peer/peer-checked variants — no JavaScript required.
<div class="bg-gradient-to-br from-purple-500 to-blue-500 p-6 rounded-2xl inline-block">
<label class="inline-flex items-center cursor-pointer">
<input type="checkbox" class="peer sr-only" />
<div class="w-11 h-6 rounded-full bg-white/20 peer-checked:bg-white/50 transition-colors relative">
<div class="absolute top-0.5 left-0.5 w-5 h-5 rounded-full bg-white shadow-sm transition-transform peer-checked:translate-x-5"></div>
</div>
</label>
</div>Neubrutalism forms
Text Input
Neubrutalism · Forms
<input type="email" placeholder="you@example.com" class="w-48 px-3 py-2 rounded-none text-sm bg-white border-[3px] border-black text-black placeholder:text-slate-500 shadow-[4px_4px_0px_#000] focus:outline-none" />Textarea
Neubrutalism · Forms
<textarea rows="3" placeholder="Type your message…" class="w-48 px-3 py-2 rounded-none text-sm bg-white border-[3px] border-black text-black placeholder:text-slate-500 shadow-[4px_4px_0px_#000] focus:outline-none"></textarea>Select Dropdown
Neubrutalism · Forms
<select class="w-48 px-3 py-2 rounded-none text-sm bg-white border-[3px] border-black text-black placeholder:text-slate-500 shadow-[4px_4px_0px_#000] focus:outline-none">
<option>United States</option>
<option>South Korea</option>
<option>Japan</option>
</select>Checkbox
Neubrutalism · Forms
<label class="inline-flex items-center gap-2 cursor-pointer">
<input type="checkbox" class="w-4 h-4 rounded text-black" />
<span class="text-sm text-black">I agree to the terms</span>
</label>Toggle Switch
Neubrutalism · Forms
Uses Tailwind's peer/peer-checked variants — no JavaScript required.
<label class="inline-flex items-center cursor-pointer">
<input type="checkbox" class="peer sr-only" />
<div class="w-11 h-6 rounded-none bg-white border-[3px] border-black peer-checked:bg-yellow-300 peer-checked:border-[3px] peer-checked:border-black transition-colors relative">
<div class="absolute top-0.5 left-0.5 w-5 h-5 rounded-full bg-white shadow-sm transition-transform peer-checked:translate-x-5"></div>
</div>
</label>Material forms
Text Input
Material · Forms
<input type="email" placeholder="you@example.com" class="w-48 px-3 py-2 rounded-lg text-sm border-b-2 border-slate-300 focus:border-blue-600 text-slate-900 placeholder:text-slate-400 focus:outline-none rounded-none" />Textarea
Material · Forms
<textarea rows="3" placeholder="Type your message…" class="w-48 px-3 py-2 rounded-lg text-sm border-b-2 border-slate-300 focus:border-blue-600 text-slate-900 placeholder:text-slate-400 focus:outline-none rounded-none"></textarea>Select Dropdown
Material · Forms
<select class="w-48 px-3 py-2 rounded-lg text-sm border-b-2 border-slate-300 focus:border-blue-600 text-slate-900 placeholder:text-slate-400 focus:outline-none rounded-none">
<option>United States</option>
<option>South Korea</option>
<option>Japan</option>
</select>Checkbox
Material · Forms
<label class="inline-flex items-center gap-2 cursor-pointer">
<input type="checkbox" class="w-4 h-4 rounded text-blue-600" />
<span class="text-sm text-slate-900">I agree to the terms</span>
</label>Toggle Switch
Material · Forms
Uses Tailwind's peer/peer-checked variants — no JavaScript required.
<label class="inline-flex items-center cursor-pointer">
<input type="checkbox" class="peer sr-only" />
<div class="w-11 h-6 rounded-full bg-slate-300 peer-checked:bg-blue-600 transition-colors relative">
<div class="absolute top-0.5 left-0.5 w-5 h-5 rounded-full bg-white shadow-sm transition-transform peer-checked:translate-x-5"></div>
</div>
</label>Gradient forms
Text Input
Gradient · Forms
<input type="email" placeholder="you@example.com" class="w-48 px-3 py-2 rounded-xl text-sm bg-white text-slate-900 placeholder:text-slate-400 ring-2 ring-purple-400 focus:outline-none" />Textarea
Gradient · Forms
<textarea rows="3" placeholder="Type your message…" class="w-48 px-3 py-2 rounded-xl text-sm bg-white text-slate-900 placeholder:text-slate-400 ring-2 ring-purple-400 focus:outline-none"></textarea>Select Dropdown
Gradient · Forms
<select class="w-48 px-3 py-2 rounded-xl text-sm bg-white text-slate-900 placeholder:text-slate-400 ring-2 ring-purple-400 focus:outline-none">
<option>United States</option>
<option>South Korea</option>
<option>Japan</option>
</select>Checkbox
Gradient · Forms
<label class="inline-flex items-center gap-2 cursor-pointer">
<input type="checkbox" class="w-4 h-4 rounded text-fuchsia-600" />
<span class="text-sm text-white">I agree to the terms</span>
</label>Toggle Switch
Gradient · Forms
Uses Tailwind's peer/peer-checked variants — no JavaScript required.
<label class="inline-flex items-center cursor-pointer">
<input type="checkbox" class="peer sr-only" />
<div class="w-11 h-6 rounded-full bg-slate-200 peer-checked:bg-gradient-to-r peer-checked:from-fuchsia-500 peer-checked:to-indigo-500 transition-colors relative">
<div class="absolute top-0.5 left-0.5 w-5 h-5 rounded-full bg-white shadow-sm transition-transform peer-checked:translate-x-5"></div>
</div>
</label>Cyberpunk forms
Text Input
Cyberpunk · Forms
<div class="bg-slate-950 p-6 rounded-xl inline-block">
<input type="email" placeholder="you@example.com" class="w-48 px-3 py-2 rounded-lg text-sm bg-slate-900 border border-cyan-400 text-cyan-300 placeholder:text-cyan-700 shadow-[0_0_10px_rgba(34,211,238,0.4)] focus:outline-none" />
</div>Textarea
Cyberpunk · Forms
<div class="bg-slate-950 p-6 rounded-xl inline-block">
<textarea rows="3" placeholder="Type your message…" class="w-48 px-3 py-2 rounded-lg text-sm bg-slate-900 border border-cyan-400 text-cyan-300 placeholder:text-cyan-700 shadow-[0_0_10px_rgba(34,211,238,0.4)] focus:outline-none"></textarea>
</div>Select Dropdown
Cyberpunk · Forms
<div class="bg-slate-950 p-6 rounded-xl inline-block">
<select class="w-48 px-3 py-2 rounded-lg text-sm bg-slate-900 border border-cyan-400 text-cyan-300 placeholder:text-cyan-700 shadow-[0_0_10px_rgba(34,211,238,0.4)] focus:outline-none">
<option>United States</option>
<option>South Korea</option>
<option>Japan</option>
</select>
</div>Checkbox
Cyberpunk · Forms
<div class="bg-slate-950 p-6 rounded-xl inline-block">
<label class="inline-flex items-center gap-2 cursor-pointer">
<input type="checkbox" class="w-4 h-4 rounded text-cyan-400" />
<span class="text-sm text-cyan-300">I agree to the terms</span>
</label>
</div>Toggle Switch
Cyberpunk · Forms
Uses Tailwind's peer/peer-checked variants — no JavaScript required.
<div class="bg-slate-950 p-6 rounded-xl inline-block">
<label class="inline-flex items-center cursor-pointer">
<input type="checkbox" class="peer sr-only" />
<div class="w-11 h-6 rounded-lg bg-slate-800 border border-cyan-900 peer-checked:bg-slate-900 peer-checked:border peer-checked:border-cyan-400 peer-checked:shadow-[0_0_10px_rgba(34,211,238,0.6)] transition-colors relative">
<div class="absolute top-0.5 left-0.5 w-5 h-5 rounded-full bg-white shadow-sm transition-transform peer-checked:translate-x-5"></div>
</div>
</label>
</div>Retro forms
Text Input
Retro · Forms
<input type="email" placeholder="you@example.com" class="w-48 px-3 py-2 rounded-2xl text-sm bg-white border-4 border-lime-500 text-slate-900 placeholder:text-slate-400 focus:outline-none" />Textarea
Retro · Forms
<textarea rows="3" placeholder="Type your message…" class="w-48 px-3 py-2 rounded-2xl text-sm bg-white border-4 border-lime-500 text-slate-900 placeholder:text-slate-400 focus:outline-none"></textarea>Select Dropdown
Retro · Forms
<select class="w-48 px-3 py-2 rounded-2xl text-sm bg-white border-4 border-lime-500 text-slate-900 placeholder:text-slate-400 focus:outline-none">
<option>United States</option>
<option>South Korea</option>
<option>Japan</option>
</select>Checkbox
Retro · Forms
<label class="inline-flex items-center gap-2 cursor-pointer">
<input type="checkbox" class="w-4 h-4 rounded text-orange-600" />
<span class="text-sm text-orange-700">I agree to the terms</span>
</label>Toggle Switch
Retro · Forms
Uses Tailwind's peer/peer-checked variants — no JavaScript required.
<label class="inline-flex items-center cursor-pointer">
<input type="checkbox" class="peer sr-only" />
<div class="w-11 h-6 rounded-full bg-orange-100 border-2 border-orange-400 peer-checked:bg-lime-400 peer-checked:border-2 peer-checked:border-lime-600 transition-colors relative">
<div class="absolute top-0.5 left-0.5 w-5 h-5 rounded-full bg-white shadow-sm transition-transform peer-checked:translate-x-5"></div>
</div>
</label>Corporate forms
Text Input
Corporate · Forms
<input type="email" placeholder="you@example.com" class="w-48 px-3 py-2 rounded-md text-sm border border-slate-300 text-slate-900 placeholder:text-slate-400 focus:ring-1 focus:ring-slate-500 focus:outline-none" />Textarea
Corporate · Forms
<textarea rows="3" placeholder="Type your message…" class="w-48 px-3 py-2 rounded-md text-sm border border-slate-300 text-slate-900 placeholder:text-slate-400 focus:ring-1 focus:ring-slate-500 focus:outline-none"></textarea>Select Dropdown
Corporate · Forms
<select class="w-48 px-3 py-2 rounded-md text-sm border border-slate-300 text-slate-900 placeholder:text-slate-400 focus:ring-1 focus:ring-slate-500 focus:outline-none">
<option>United States</option>
<option>South Korea</option>
<option>Japan</option>
</select>Checkbox
Corporate · Forms
<label class="inline-flex items-center gap-2 cursor-pointer">
<input type="checkbox" class="w-4 h-4 rounded text-slate-700" />
<span class="text-sm text-slate-800">I agree to the terms</span>
</label>Toggle Switch
Corporate · Forms
Uses Tailwind's peer/peer-checked variants — no JavaScript required.
<label class="inline-flex items-center cursor-pointer">
<input type="checkbox" class="peer sr-only" />
<div class="w-11 h-6 rounded-md bg-slate-300 peer-checked:bg-slate-700 transition-colors relative">
<div class="absolute top-0.5 left-0.5 w-5 h-5 rounded-full bg-white shadow-sm transition-transform peer-checked:translate-x-5"></div>
</div>
</label>Playful forms
Text Input
Playful · Forms
<input type="email" placeholder="you@example.com" class="w-48 px-3 py-2 rounded-3xl text-sm bg-blue-50 border-2 border-blue-200 text-blue-900 placeholder:text-blue-400 focus:outline-none focus:border-blue-400" />Textarea
Playful · Forms
<textarea rows="3" placeholder="Type your message…" class="w-48 px-3 py-2 rounded-3xl text-sm bg-blue-50 border-2 border-blue-200 text-blue-900 placeholder:text-blue-400 focus:outline-none focus:border-blue-400"></textarea>Select Dropdown
Playful · Forms
<select class="w-48 px-3 py-2 rounded-3xl text-sm bg-blue-50 border-2 border-blue-200 text-blue-900 placeholder:text-blue-400 focus:outline-none focus:border-blue-400">
<option>United States</option>
<option>South Korea</option>
<option>Japan</option>
</select>Checkbox
Playful · Forms
<label class="inline-flex items-center gap-2 cursor-pointer">
<input type="checkbox" class="w-4 h-4 rounded text-pink-600" />
<span class="text-sm text-yellow-800">I agree to the terms</span>
</label>Toggle Switch
Playful · Forms
Uses Tailwind's peer/peer-checked variants — no JavaScript required.
<label class="inline-flex items-center cursor-pointer">
<input type="checkbox" class="peer sr-only" />
<div class="w-11 h-6 rounded-full bg-slate-200 peer-checked:bg-pink-400 transition-colors relative">
<div class="absolute top-0.5 left-0.5 w-5 h-5 rounded-full bg-white shadow-sm transition-transform peer-checked:translate-x-5"></div>
</div>
</label>Building usable forms
Good forms are mostly about clarity: a visible label for every field, a sensible input type (email, tel, number) so mobile keyboards adapt, and helpful error messages next to the field that caused them. Placeholder text is a hint, not a label — it disappears as soon as the user starts typing.
The toggle switch is built from a visually hidden checkbox and Tailwind's peer and peer-checked variants, so it works without JavaScript and still submits like a normal checkbox. Use a toggle for settings that take effect immediately, and a checkbox for choices confirmed with a Submit button.
Accessibility tips
Connect every label to its control, either by wrapping the input in the <label> or with matching for and id attributes. Keep a clear focus ring — the examples use focus:ring-2 — and never rely on a red border alone to show an error; add text that explains what went wrong.
Frequently Asked Questions
How do I build a toggle switch without JavaScript?↓
Use a checkbox with the sr-only and peer classes, followed by a styled track and knob that change with peer-checked: utilities. The Toggle Switch component on this page uses exactly that pattern.
Should I use a placeholder instead of a label?↓
No. Placeholders vanish while typing and often have low contrast. Keep a visible label and use the placeholder only for a short example of the expected format.
How do I style a select dropdown in Tailwind?↓
Apply the same border, padding and focus classes as your text inputs. To replace the native arrow, add appearance-none and position a custom icon on the right side of a relative wrapper.
Last updated: