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"
class=" text-base border border-gray-300 text-gray-900 rounded-md focus:ring-indigo-600 focus:border-indigo-600 block w-full p-2 px-3 disabled:opacity-50 disabled:pointer-events-none"
placeholder="This is Placeholder"
/>Label
Basic input example with label.
<label for="withLabel" class="mb-2 block text-gray-800">Email</label>
<input
type="email"
id="withLabel"
class=" text-base border border-gray-300 text-gray-900 rounded-md focus:ring-indigo-600 focus:border-indigo-600 block w-full p-2 px-3 disabled:opacity-50 disabled:pointer-events-none"
placeholder="Email"
/>Hidden Label
<label>
elements hidden using the
.sr-only
class
Textarea
<textarea
rows="4"
class=" text-base border border-gray-300 text-gray-900 rounded-md focus:ring-indigo-600 focus:border-indigo-600 block w-full p-2 px-3 disabled:opacity-50 disabled:pointer-events-none"
placeholder="Hello World"
></textarea>Sizing
<input
type="text"
class="py-1 px-3 block w-full text-sm border-gray-300 rounded-md focus:border-indigo-600 focus:ring-indigo-600 disabled:opacity-50 disabled:pointer-events-none"
placeholder="Small size"
/>
<input
type="text"
class="py-2 px-4 block w-full border-gray-300 rounded-md focus:border-indigo-600 focus:ring-indigo-600 disabled:opacity-50 disabled:pointer-events-none"
placeholder="Default size"
/>
<input
type="text"
class="py-3 px-4 text-lg block w-full border-gray-300 rounded-md focus:border-indigo-600 focus:ring-indigo-600 disabled:opacity-50 disabled:pointer-events-none"
placeholder="Large size"
/>Select
Customize the native
<select>
s with custom CSS that changes the element’s initial appearance.
<select class="py-2 px-4 pr-9 block w-full border-gray-300 rounded-md focus:border-indigo-600 focus:ring-indigo-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">
<input type="checkbox" class="w-4 h-4 text-indigo-600 bg-white border-gray-300 rounded focus:ring-indigo-600 focus:outline-none focus:ring-2" id="default-checkbox" />
<label for="default-checkbox" class="text-gray-500 ml-3 ">Default checkbox</label>
</div>
<div class="flex">
<input type="checkbox" class="w-4 h-4 text-indigo-600 bg-white border-gray-300 rounded focus:ring-indigo-600 focus:outline-none focus:ring-2" id="checked-checkbox" checked />
<label for="checked-checkbox" class="text-gray-500 ml-3 ">Checked checkbox</label>
</div>Disabled State Checks and radios
Disabled checkboxes and radios.
<div class="flex items-center mb-1">
<input
type="checkbox"
class="w-4 h-4 text-indigo-600 bg-white disabled:opacity-50 border-gray-300 rounded focus:ring-indigo-600 focus:outline-none focus:ring-2"
id="default-checkbox-disabled"
disabled
/>
<label for="default-checkbox-disabled" class="ml-3">Default checkbox</label>
</div>
<div class="flex items-center mb-1">
<input
type="checkbox"
class="w-4 h-4 text-indigo-600 bg-white disabled:opacity-50 border-gray-300 rounded focus:ring-indigo-600 focus:outline-none focus:ring-2"
id="checked-checkbox-disabled"
checked
disabled
/>
<label for="checked-checkbox-disabled" class="ml-3">Checked checkbox</label>
</div><div class="flex items-center mb-1">
<input
type="radio"
name="default-radio"
class="w-4 h-4 text-indigo-600 bg-white border-gray-300 rounded-full disabled:opacity-50 focus:ring-indigo-600 focus:outline-none focus:ring-2"
id="default-radio-disabled"
disabled
/>
<label for="default-radio-disabled" class="ml-2">Default radio</label>
</div>
<div class="flex items-center">
<input
type="radio"
name="default-radio"
class="w-4 h-4 text-indigo-600 bg-white border-gray-300 rounded-full disabled:opacity-50 focus:ring-indigo-600 focus:outline-none focus:ring-2"
id="checked-radio-disabled"
checked
disabled
/>
<label for="checked-radio-disabled" class="ml-2">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-indigo-600 disabled:opacity-50 disabled:pointer-events-none checked:bg-none checked:text-indigo-600 checked:border-indigo-600 focus:checked:border-indigo-600 before:inline-block before:w-4 before:h-4 before:bg-white checked:before:bg-indigo-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-indigo-600 disabled:opacity-50 disabled:pointer-events-none checked:bg-none checked:text-indigo-600 checked:border-indigo-600 focus:checked:border-indigo-600 before:inline-block before:w-4 before:h-4 before:bg-white checked:before:bg-indigo-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>