Back to application components
Inputs
Form input components with responsive text fields, search boxes, and form controls. Customizable input elements with various styles including icons and floating labels.
4/4 Dark Mode Updated: Jul 4, 2026
<label for="Email">
<span class="text-sm font-medium text-gray-700"> Email </span>
<input
type="email"
id="Email"
class="mt-0.5 w-full rounded border-gray-300 shadow-sm sm:text-sm"
/>
</label>Standard text input with label and border styling
Plugins: @tailwindcss/forms
<label for="Email">
<span class="text-sm font-medium text-gray-700 dark:text-gray-200"> Email </span>
<input
type="email"
id="Email"
class="mt-0.5 w-full rounded border-gray-300 shadow-sm sm:text-sm dark:border-gray-600 dark:bg-gray-900 dark:text-white"
/>
</label>Standard text input with label and border styling
Plugins: @tailwindcss/forms
<label for="Email">
<span class="text-sm font-medium text-gray-700"> Email </span>
<div class="relative">
<input
type="email"
id="Email"
class="mt-0.5 w-full rounded border-gray-300 pe-8 shadow-sm sm:text-sm"
/>
<span class="absolute inset-y-0 right-0 grid w-8 place-content-center text-gray-700">
<svg
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="size-4"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M16.5 12a4.5 4.5 0 1 1-9 0 4.5 4.5 0 0 1 9 0Zm0 0c0 1.657 1.007 3 2.25 3S21 13.657 21 12a9 9 0 1 0-2.636 6.364M16.5 12V8.25"
/>
</svg>
</span>
</div>
</label>Input field with an icon positioned on the right side
Plugins: @tailwindcss/forms
<label for="Email">
<span class="text-sm font-medium text-gray-700 dark:text-gray-200"> Email </span>
<div class="relative">
<input
type="email"
id="Email"
class="mt-0.5 w-full rounded border-gray-300 shadow-sm sm:text-sm dark:border-gray-600 dark:bg-gray-900 dark:text-white"
/>
<span
class="absolute inset-y-0 right-0 grid w-8 place-content-center text-gray-700 dark:text-gray-200"
>
<svg
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="size-4"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M16.5 12a4.5 4.5 0 1 1-9 0 4.5 4.5 0 0 1 9 0Zm0 0c0 1.657 1.007 3 2.25 3S21 13.657 21 12a9 9 0 1 0-2.636 6.364M16.5 12V8.25"
/>
</svg>
</span>
</div>
</label>Input field with an icon positioned on the right side
Plugins: @tailwindcss/forms
<label for="Search">
<span class="text-sm font-medium text-gray-700"> Search </span>
<div class="relative">
<input
type="text"
id="Search"
class="mt-0.5 w-full rounded border-gray-300 pe-10 shadow-sm sm:text-sm"
/>
<span class="absolute inset-y-0 right-2 grid w-8 place-content-center">
<button
type="button"
aria-label="Submit"
class="rounded-full p-1.5 text-gray-700 transition-colors hover:bg-gray-100"
>
<svg
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="size-4"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z"
/>
</svg>
</button>
</span>
</div>
</label>Search input with an integrated action button
Plugins: @tailwindcss/forms
<label for="Search">
<span class="text-sm font-medium text-gray-700 dark:text-gray-200"> Search </span>
<div class="relative">
<input
type="text"
id="Search"
class="mt-0.5 w-full rounded border-gray-300 shadow-sm sm:text-sm dark:border-gray-600 dark:bg-gray-900 dark:text-white"
/>
<span class="absolute inset-y-0 right-2 grid w-8 place-content-center">
<button
type="button"
aria-label="Submit"
class="rounded-full p-1.5 text-gray-700 transition-colors hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-800"
>
<svg
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="size-4"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z"
/>
</svg>
</button>
</span>
</div>
</label>Search input with an integrated action button
Plugins: @tailwindcss/forms
<label for="Email" class="relative">
<input
type="email"
id="Email"
placeholder=""
class="peer mt-0.5 w-full rounded border-gray-300 shadow-sm sm:text-sm"
/>
<span
class="absolute inset-y-0 start-3 -translate-y-5 bg-white px-0.5 text-sm font-medium text-gray-700 transition-transform peer-placeholder-shown:translate-y-0 peer-focus:-translate-y-5"
>
Email
</span>
</label>Input with animated label that floats above on focus
Plugins: @tailwindcss/forms
<label for="Email" class="relative">
<input
type="email"
id="Email"
placeholder=""
class="peer mt-0.5 w-full rounded border-gray-300 shadow-sm sm:text-sm dark:border-gray-600 dark:bg-gray-900 dark:text-white"
/>
<span
class="absolute inset-y-0 start-3 -translate-y-5 bg-white px-0.5 text-sm font-medium text-gray-700 transition-transform peer-placeholder-shown:translate-y-0 peer-focus:-translate-y-5 dark:bg-gray-900 dark:text-white"
>
Email
</span>
</label>Input with animated label that floats above on focus
Plugins: @tailwindcss/forms