Please try us on a desktop
Our app relies on some desktop browser features to render design files and interactable code. Unfortunately, we haven't been able to make these work on mobile yet.
Please try Kombai using a chromium based browser on desktop.
×
Creating user-friendly and attractive forms is essential to web development, as forms are a key way to interact with users and gather data. Tailwind CSS makes it easier for developers to design responsive and visually appealing forms. In this article, we’ll dive into the world of Tailwind forms, looking at different form layouts, how to use them, and some real-world examples.
We’ll start with form layouts like inline, underline, and grid forms. Then, we’ll discuss how Tailwind CSS can be used for common form elements like inputs, textareas, select inputs, checkboxes, and radio buttons. We’ll also showcase some examples of Tailwind forms built using the Flowbite component library, showing how easy it is to create good-looking and functional form designs.
This article is suitable for developers with any experience with Tailwind CSS, providing helpful information and inspiration for designing great forms. Let’s dive into the world of Tailwind forms and discover how to create effective and visually appealing form designs.
Types of forms from Tailwind
In this section, we will discuss three different types of forms that can be easily created using Tailwind CSS.
Inline form
Inline forms are compact and efficient, with form elements arranged horizontally. They are ideal for situations where screen real estate is limited, such as in toolbars or search bars. Here's how you can create an inline form with Tailwind CSS:
<form class="flex items-center">
<input class="mr-2" type="text" placeholder="Name" />
<input class="mr-2" type="email" placeholder="Email" />
<button class="bg-blue-500 text-white px-4 py-2">Submit</button>
</form>Underline form
Underline forms focus on minimalism, with form elements only displaying a bottom border. This form is suitable for applications that prioritize simplicity and a clean aesthetic. To create an underline form with Tailwind CSS, use the following code:
<form class="space-y-4">
<input
class="border-b-2 border-gray-200 w-full"
type="text"
placeholder="Name"
/>
<input
class="border-b-2 border-gray-200 w-full"
type="email"
placeholder="Email"
/>
<button class="bg-blue-500 text-white px-4 py-2">Submit</button>
</form>Grid form
Grid forms arrange form elements in a structured layout, which can help organize large forms with multiple input fields. With Tailwind CSS, you can create a grid form like this:
<form class="grid grid-cols-2 gap-4">
<input class="col-span-1" type="text" placeholder="First Name" />
<input class="col-span-1" type="text" placeholder="Last Name" />
<input class="col-span-2" type="email" placeholder="Email" />
<button class="bg-blue-500 text-white px-4 py-2 col-span-2">Submit</button>
</form>Basic usage of forms in Tailwind CSS
Tailwind CSS offers a wide range of form elements, making it easy for developers to create functional and visually appealing forms. In this section, we will cover the basic usage of various form elements in Tailwind CSS.
Inputs
Inputs are the most common form elements, allowing users to enter text information. To style an input element with Tailwind CSS, use the following code:
<input
class="border-2 border-gray-200 rounded px-3 py-2 w-full"
type="text"
placeholder="Enter your text"
/>Additionally, here's a table that lists all of the available input types that you can use with Tailwind:
| Type | Code |
|---|---|
| Text | <input type="text"> |
| Password | <input type="password"> |
<input type="email"> |
|
| Number | <input type="number"> |
| URL | <input type="url"> |
| Date | <input type="date"> |
| Datetime-local | <input type="datetime-local"> |
| Month | <input type="month"> |
| Week | <input type="week"> |
| Time | <input type="time"> |
| Search | <input type="search"> |
| Tel | <input type="tel"> |
| Checkbox | <input type="checkbox"> |
| Radio | <input type="radio"> |
| Select | <select></select> |
| Select[multiple] | <select multiple></select> |
| Textarea | <textarea></textarea> |
Textarea
A textarea is used when you need to collect larger amounts of text from users. With Tailwind CSS, you can style a textarea like this:
<textarea
class="border-2 border-gray-200 rounded px-3 py-2 w-full"
rows="4"
placeholder="Enter your message"
></textarea>Select input
Select inputs allow users to choose an option from a dropdown list. To style a select input with Tailwind CSS, use the following code:
<select class="border-2 border-gray-200 rounded px-3 py-2 w-full">
<option>Select an option</option>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>Checkbox
Checkboxes enable users to select one or more options from a list. You can style a checkbox with Tailwind CSS like this:
<label class="flex items-center">
<input class="mr-2" type="checkbox" />
<span>Option 1</span>
</label>Radio buttons
Radio buttons allow users to select only one option from a list. To style radio buttons with Tailwind CSS, use the following code:
<label class="flex items-center">
<input class="mr-2" type="radio" name="options" />
<span>Option 1</span>
</label>Examples of Tailwind forms using Flowbite
Flowbite is a comprehensive library of Tailwind CSS components that can simplify the process of creating forms. In this section, we will show you examples of Tailwind forms created using Flowbite.
Login form
Here's an example of a login form from Flowbite:
<form>
<div class="mb-6">
<label
for="email"
class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
>Your email</label
>
<input
type="email"
id="email"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
placeholder="name@flowbite.com"
required
/>
</div>
<div class="mb-6">
<label
for="password"
class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
>Your password</label
>
<input
type="password"
id="password"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
required
/>
</div>
<div class="flex items-start mb-6">
<div class="flex items-center h-5">
<input
id="remember"
type="checkbox"
value=""
class="w-4 h-4 border border-gray-300 rounded bg-gray-50 focus:ring-3 focus:ring-blue-300 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-blue-600 dark:ring-offset-gray-800 dark:focus:ring-offset-gray-800"
required
/>
</div>
<label
for="remember"
class="ml-2 text-sm font-medium text-gray-900 dark:text-gray-300"
>Remember me</label
>
</div>
<button
type="submit"
class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
>
Submit
</button>
</form>Helper text
Helper text can be used to provide additional information or guidance to users. Here's an example of a form with helper text from Flowbite:
<label
for="email"
class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
>Your email</label
>
<input
type="email"
id="email"
aria-describedby="helper-text-explanation"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
placeholder="name@flowbite.com"
/>
<p
id="helper-text-explanation"
class="mt-2 text-sm text-gray-500 dark:text-gray-400"
>
We’ll never share your details. Read our
<a
href="#"
class="font-medium text-blue-600 hover:underline dark:text-blue-500"
>Privacy Policy</a
>.
</p>Shadow inputs
Shadow inputs add a subtle depth effect to form elements. Here's an example of a form with shadow inputs from Flowbite:
<form>
<div class="mb-6">
<label
for="email"
class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
>Your email</label
>
<input
type="email"
id="email"
class="shadow-sm bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 dark:shadow-sm-light"
placeholder="name@flowbite.com"
required
/>
</div>
<div class="mb-6">
<label
for="password"
class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
>Your password</label
>
<input
type="password"
id="password"
class="shadow-sm bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 dark:shadow-sm-light"
required
/>
</div>
<div class="mb-6">
<label
for="repeat-password"
class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
>Repeat password</label
>
<input
type="password"
id="repeat-password"
class="shadow-sm bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 dark:shadow-sm-light"
required
/>
</div>
<div class="flex items-start mb-6">
<div class="flex items-center h-5">
<input
id="terms"
type="checkbox"
value=""
class="w-4 h-4 border border-gray-300 rounded bg-gray-50 focus:ring-3 focus:ring-blue-300 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-blue-600 dark:ring-offset-gray-800 dark:focus:ring-offset-gray-800"
required
/>
</div>
<label
for="terms"
class="ml-2 text-sm font-medium text-gray-900 dark:text-gray-300"
>I agree with the
<a href="#" class="text-blue-600 hover:underline dark:text-blue-500"
>terms and conditions</a
></label
>
</div>
<button
type="submit"
class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
>
Register new account
</button>
</form>Form validation
Form validation ensures that users provide the required information in the correct format. Here's an example from Flowbite:
<div class="mb-6">
<label
for="username-success"
class="block mb-2 text-sm font-medium text-green-700 dark:text-green-500"
>Your name</label
>
<input
type="text"
id="username-success"
class="bg-green-50 border border-green-500 text-green-900 placeholder-green-700 text-sm rounded-lg focus:ring-green-500 focus:border-green-500 block w-full p-2.5 dark:bg-green-100 dark:border-green-400"
placeholder="Bonnie Green"
/>
<p class="mt-2 text-sm text-green-600 dark:text-green-500">
<span class="font-medium">Alright!</span> Username available!
</p>
</div>
<div>
<label
for="username-error"
class="block mb-2 text-sm font-medium text-red-700 dark:text-red-500"
>Your name</label
>
<input
type="text"
id="username-error"
class="bg-red-50 border border-red-500 text-red-900 placeholder-red-700 text-sm rounded-lg focus:ring-red-500 focus:border-red-500 block w-full p-2.5 dark:bg-red-100 dark:border-red-400"
placeholder="Bonnie Green"
/>
<p class="mt-2 text-sm text-red-600 dark:text-red-500">
<span class="font-medium">Oops!</span> Username already taken!
</p>
</div>Conclusion
In conclusion, Tailwind CSS offers a versatile and efficient solution for designing and implementing a variety of form styles, from inline to underline and grid forms. The framework empowers developers to quickly and precisely craft custom forms using elements like inputs, textareas, select inputs, checkboxes, radio buttons, etc.
Additionally, incorporating component libraries such as Flowbite can further enhance the development experience and simplify the creation of visually appealing forms. The examples provided in this article serve as a foundation for building tailor-made Tailwind forms that excel aesthetically and deliver outstanding performance.
We hope this article gave you a comprehensive understanding of form creation and styling using Tailwind CSS and Flowbite. As you delve deeper into these powerful tools, you’ll discover an extensive range of possibilities for designing user-friendly forms that captivate and engage your audience.
Happy Coding!
