Tailwind CSS Forms
Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms.
Form Control
Textual form controls—like
<input>
s,
<select>
s, and
<textarea>
s—are styled with the
.form-control
class. Included are styles for general appearance, focus state, sizing, and more.
<input
type="text"
placeholder="This is placeholder"
class="border border-gray-300 text-gray-900 rounded-lg focus:shadow-[0_0_0_.25rem_rgba(10,173,10,.25)] focus:ring-green-600 focus:ring-0 focus:border-green-600 block p-2 px-3 disabled:opacity-50 disabled:pointer-events-none w-full text-base"
/>Label
Basic input example with label.
<label for="withLabel" class="inline-block text-gray-800 font-medium mb-2">Email</label>
<input
type="email"
id="withLabel"
class="border border-gray-300 text-gray-900 rounded-lg focus:shadow-[0_0_0_.25rem_rgba(10,173,10,.25)] focus:ring-green-600 focus:ring-0 focus:border-green-600 block p-2 px-3 disabled:opacity-50 disabled:pointer-events-none w-full text-base"
placeholder="Email"
/>Textarea
<textarea
rows="4"
class="border border-gray-300 text-gray-900 rounded-lg focus:shadow-[0_0_0_.25rem_rgba(10,173,10,.25)] focus:ring-green-600 focus:ring-0 focus:border-green-600 block p-2 px-3 disabled:opacity-50 disabled:pointer-events-none w-full text-base"
placeholder="Hello World"
></textarea>Sizing
<input
type="text"
class="border border-gray-300 text-gray-900 rounded-lg focus:shadow-[0_0_0_.25rem_rgba(10,173,10,.25)] focus:ring-green-600 focus:ring-0 focus:border-green-600 block p-1 px-2 disabled:opacity-50 disabled:pointer-events-none w-full text-base"
placeholder="Small size"
/>
<input
type="text"
class="border border-gray-300 text-gray-900 rounded-lg focus:shadow-[0_0_0_.25rem_rgba(10,173,10,.25)] focus:ring-green-600 focus:ring-0 focus:border-green-600 block p-2 px-3 disabled:opacity-50 disabled:pointer-events-none w-full text-base"
placeholder="Default size"
/>
<input
type="text"
class="border border-gray-300 text-gray-900 rounded-lg focus:shadow-[0_0_0_.25rem_rgba(10,173,10,.25)] focus:ring-green-600 focus:ring-0 focus:border-green-600 block p-3 px-5 disabled:opacity-50 disabled:pointer-events-none w-full text-base"
placeholder="Large size"
/>Select
Customize the native
<select>
with custom CSS that changes the element’s initial appearance.
<select class="text-base py-2 block w-full border-gray-300 rounded-lg focus:border-green-600 focus:ring-green-600 disabled:opacity-50 disabled:pointer-events-none">
<option selected>Open this select menu</option>
<option>1</option>
<option>2</option>
<option>3</option>
</select>Checks and radios
Create consistent cross-browser and cross-device checkboxes and radios with our completely rewritten checks component.
<div class="flex items-center">
<input type="checkbox" class="w-4 h-4 text-green-600 bg-white border-gray-300 rounded focus:ring-green-600 focus:outline-none focus:ring-2" id="default-checkbox" />
<label for="default-checkbox" class="text-gray-800 ms-3">Default checkbox</label>
</div>
<div class="flex items-center">
<input type="checkbox" class="w-4 h-4 text-green-600 bg-white border-gray-300 rounded focus:ring-green-600 focus:outline-none focus:ring-2" id="checked-checkbox" checked />
<label for="checked-checkbox" class="text-gray-800 ms-3">Checked checkbox</label>
</div><div class="flex items-center">
<input
type="radio"
name="default-radio"
class="w-4 h-4 text-green-600 bg-white border-gray-300 rounded-full focus:ring-green-600 focus:outline-none focus:ring-2"
id="default-radio"
/>
<label for="default-radio" class="text-gray-800 ms-3">Default radio</label>
</div>
<div class="flex items-center">
<input
type="radio"
name="default-radio"
class="w-4 h-4 text-green-600 bg-white border-gray-300 rounded-full focus:ring-green-600 focus:outline-none focus:ring-2"
id="checked-radio"
checked=""
/>
<label for="checked-radio" class="text-gray-800 ms-3">Checked radio</label>
</div>Switches
The default form of a toggle.
<input
type="checkbox"
id="switch-default1"
class="relative w-[2.3rem] h-5 p-px bg-gray-200 border-transparent text-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:ring-green-600 disabled:opacity-50 disabled:pointer-events-none checked:bg-none checked:text-green-600 checked:border-green-600 focus:checked:border-green-600 before:inline-block before:w-4 before:h-4 before:bg-white checked:before:bg-green-200 before:translate-x-0 checked:before:translate-x-full before:rounded-full before:shadow before:transform before:ring-0 before:transition before:ease-in-out before:duration-200"
checked
/>
<label for="switch-default1" class="sr-only">switch</label><input
type="checkbox"
id="switch-default2"
class="relative w-[2.3rem] h-5 p-px bg-gray-200 border-transparent text-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:ring-green-600 disabled:opacity-50 disabled:pointer-events-none checked:bg-none checked:text-green-600 checked:border-green-600 focus:checked:border-green-600 before:inline-block before:w-4 before:h-4 before:bg-white checked:before:bg-green-200 before:translate-x-0 checked:before:translate-x-full before:rounded-full before:shadow before:transform before:ring-0 before:transition before:ease-in-out before:duration-200"
/>
<label for="switch-default2" class="sr-only">switch</label>