Creative Tim Logo Soft UI Flowbite

Tailwind CSS Forms

Use the Tailwind CSS form and input elements such as checkboxes, radios, textarea, text inputs to collect information from users.

Get started with these custom Tailwind CSS form components to gather information from your users using input text elements, checkboxes, radios, textareas, selects, file uploads, toggle switches, and more.

Form example

This is an example of a form component including an email, password, checkbox, and submit button that you can use as a starting point for any form element in your website using Flowbite and Tailwind CSS. 

<form>
  <div class="mb-6">
    <label for="email" class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300">Your email</label>
    <input type="email" id="email" class="bg-transparent border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-2 focus:ring-fuchsia-50 focus:border-fuchsia-300 block w-full p-2.5 dark:text-white" placeholder="[email protected]" required>
  </div>
  <div class="mb-6">
    <label for="password" class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300">Your password</label>
    <input type="password" id="password" class="bg-transparent border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-2 focus:ring-fuchsia-50 focus:border-fuchsia-300 block w-full p-2.5 dark:text-white" required>
  </div>
  <div class="flex items-start mb-6">
    <div class="flex items-center h-5">
      <input id="remember" aria-describedby="remember" type="checkbox" class="w-5 h-5 bg-transparent rounded border border-gray-300 focus:ring-0 checked:bg-dark-900" required>
    </div>
    <div class="ml-3 text-sm">
      <label for="remember" class="font-medium text-gray-900 dark:text-gray-300">Remember me</label>
    </div>
  </div>
  <button type="submit" class="text-white bg-gradient-to-br from-pink-500 to-voilet-500 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 text-center inline-flex items-center shadow-md shadow-gray-300 dark:shadow-gray-900 hover:scale-[1.02] transition-transform">Submit</button>
</form>

Input Sizing

Use the following utility classes to create three different sizing options (large, base, and small) for your form input elements. 

<div class="mb-6">
    <label for="large-input" class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300">Large input</label>
    <input type="text" id="large-input" class="p-4 bg-transparent border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-2 focus:ring-fuchsia-50 focus:border-fuchsia-300 block w-full dark:text-white">
</div>
<div class="mb-6">
    <label for="base-input" class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300">Base input</label>
    <input type="text" id="base-input" class="bg-transparent border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-2 focus:ring-fuchsia-50 focus:border-fuchsia-300 block w-full p-2.5 dark:text-white">
</div>
<div>
    <label for="small-input" class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300">Small input</label>
    <input type="text" id="small-input" class="p-2 bg-transparent border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-2 focus:ring-fuchsia-50 focus:border-fuchsia-300 block w-full dark:text-white">
</div>

Disabled inputs

Use the following utility classes to indicate a disabled form input item. 

<input type="text" id="disabled-input" class="mb-6 bg-gray-200 border-0 text-gray-900 sm:text-sm rounded-lg focus:ring-2 focus:ring-fuchsia-50 focus:border-fuchsia-300 block w-full p-2.5 dark:text-white" value="Disabled input" disabled>
<input type="text" id="disabled-input-2" class="bg-gray-200 border-0 text-gray-900 sm:text-sm rounded-lg focus:ring-2 focus:ring-fuchsia-50 focus:border-fuchsia-300 block w-full p-2.5 dark:text-white" value="Disabled readonly input" disabled readonly>

Input element with icon

Use the following Tailwind utility classes and SVG icon to add an icon inside input form elements. 

<label for="email-adress-icon" class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300">Your Email</label>

<div class="relative">
  <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
    <svg class="w-5 h-5 text-gray-500 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z"></path><path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z"></path></svg>
  </div>
  <input type="text" id="email-adress-icon" class="bg-transparent border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-2 focus:ring-fuchsia-50 focus:border-fuchsia-300 block w-full p-2.5 pl-10 dark:text-white" placeholder="[email protected]">
</div>

Textarea

Use the following code to create a textarea form element.

<label for="message" class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-400">Your message</label>
<textarea id="message" rows="4" class="bg-transparent border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-2 focus:ring-fuchsia-50 focus:border-fuchsia-300 block w-full p-2.5 dark:text-white" placeholder="Leave a comment..."></textarea>

Select input

Use the following select input element to show selectable list of items. 

<label for="countries" class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-400">Select your country</label>
<select id="countries" class="bg-transparent border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-2 focus:ring-fuchsia-50 focus:border-fuchsia-300 block w-full p-2.5 dark:text-white">

  <option>United States</option>
  <option>Canada</option>
  <option>France</option>
  <option>Germany</option>
</select>

Checkbox

The code below can be used to create a fieldset of checkbox elements inside a form. We also created a checkbox variant with extra description and one in a disabled form.

Checkbox variants
For orders shipped from Flowbite from € 25 in books or € 29 on other categories 
<fieldset>
  <legend class="sr-only">Checkbox variants</legend>

  <div class="flex items-center mb-4">
      <input id="checkbox-1" aria-describedby="checkbox-1" type="checkbox" class="w-5 h-5 bg-transparent rounded border border-gray-300 focus:ring-0 checked:bg-dark-900" checked>
      <label for="checkbox-1" class="ml-3 text-sm font-medium text-gray-900 dark:text-gray-300">I agree to the <a href="#" class="text-text-fuchsia-500 dark:text-fuchsia-400-600 hover:underline dark:text-text-fuchsia-500 dark:text-fuchsia-400-500">terms and conditions</a></label>
  </div>

  <div class="flex items-center mb-4">
      <input id="checkbox-2" aria-describedby="checkbox-2" type="checkbox" class="w-5 h-5 bg-transparent rounded border border-gray-300 focus:ring-0 checked:bg-dark-900">
      <label for="checkbox-2" class="ml-3 text-sm font-medium text-gray-900 dark:text-gray-300">I want to get promotional offers</label>
  </div>

  <div class="flex items-center mb-4">
      <input id="checkbox-3" aria-describedby="checkbox-3" type="checkbox" class="w-5 h-5 bg-transparent rounded border border-gray-300 focus:ring-0 checked:bg-dark-900">
      <label for="checkbox-3" class="ml-3 text-sm font-medium text-gray-900 dark:text-gray-300">I am 18 years or older</label>
  </div>
  
  <div class="flex mb-4">
    <div class="flex items-center h-5">
      <input id="shipping-2" aria-describedby="shipping-2" type="checkbox" class="w-5 h-5 bg-transparent rounded border border-gray-300 focus:ring-0 checked:bg-dark-900">
    </div>
    <div class="ml-3 text-sm">
      <label for="shipping-2" class="font-medium text-gray-900 dark:text-gray-300">Free shipping via Flowbite</label>
      <div class="text-gray-500 dark:text-gray-300"><span class="text-xs font-normal">For orders shipped from Flowbite from <span class="font-medium">€ 25</span> in books or <span>€ 29</span> on other categories</span></div>
    </div>
  </div>

  <div class="flex items-center">
      <input id="international-shipping-disabled" aria-describedby="international-shipping-disabled" type="checkbox" class="w-5 h-5 bg-transparent rounded border border-gray-300 focus:ring-0 checked:bg-dark-900" disabled>
      <label for="international-shipping-disabled" class="ml-3 text-sm font-medium text-gray-300 dark:text-gray-500">Eligible for international shipping (disabled)</label>
  </div>
</fieldset>

Radio

Group a series of buttons together on a single line or stack them in a vertical column.

Countries 
<fieldset>
  <legend class="sr-only">Countries</legend>

  <div class="flex items-center mb-4">
    <input id="country-option-1" type="radio" name="countries" value="USA" class="w-5 h-5 bg-transparent rounded-full border border-gray-300 focus:ring-0 checked:bg-dark-900" aria-labelledby="country-option-1" aria-describedby="country-option-1" checked>
    <label for="country-option-1" class="block ml-2 text-sm font-medium text-gray-900 dark:text-gray-300">
      United States
    </label>
  </div>

  <div class="flex items-center mb-4">
    <input id="country-option-2" type="radio" name="countries" value="Germany" class="w-5 h-5 bg-transparent rounded-full border border-gray-300 focus:ring-0 checked:bg-dark-900" aria-labelledby="country-option-2" aria-describedby="country-option-2">
    <label for="country-option-2" class="block ml-2 text-sm font-medium text-gray-900 dark:text-gray-300">
      Germany
    </label>
  </div>

  <div class="flex items-center mb-4">
    <input id="country-option-3" type="radio" name="countries" value="Spain" class="w-5 h-5 bg-transparent rounded-full border border-gray-300 focus:ring-0 checked:bg-dark-900" aria-describedby="country-option-3">
    <label for="country-option-3" class="block ml-2 text-sm font-medium text-gray-900 dark:text-gray-300">
      Spain
    </label>
  </div>

  <div class="flex items-center mb-4">
    <input id="country-option-4" type="radio" name="countries" value="United Kingdom" class="w-5 h-5 bg-transparent rounded-full border border-gray-300 focus:ring-0 checked:bg-dark-900" aria-labelledby="country-option-4" aria-describedby="country-option-4">
    <label for="country-option-4" class="block ml-2 text-sm font-medium text-gray-900 dark:text-gray-300">
      United Kingdom
    </label>
  </div>

  <div class="flex items-center">
    <input id="option-disabled" type="radio" name="countries" value="China" class="w-5 h-5 bg-transparent rounded-full border border-gray-300 focus:ring-0 checked:bg-dark-900" aria-labelledby="option-disabled" aria-describedby="option-disabled" disabled>
    <label for="option-disabled" class="block ml-2 text-sm font-medium text-gray-300 dark:text-gray-700">
      China (disabled)
    </label>
  </div>
</fieldset>

Toggle Switch

Use the following toggle switch component to ask for a yes or no type of input from your users without the use of JavaScript. 

<label for="toggle-example" class="flex relative items-center mb-4 cursor-pointer">
<input type="checkbox" id="toggle-example" class="sr-only">

  <div class="w-11 h-6 bg-gray-200 rounded-full border border-gray-200 toggle-bg dark:bg-gray-700 dark:border-gray-600"></div>
  <span class="ml-3 text-sm font-medium text-gray-900 dark:text-gray-300">Toggle me</span>
</label>

<label for="toggle-example-checked" class="flex relative items-center mb-4 cursor-pointer">
  <input type="checkbox" id="toggle-example-checked" class="sr-only" checked>
  <div class="w-11 h-6 bg-gray-200 rounded-full border border-gray-200 toggle-bg dark:bg-gray-700 dark:border-gray-600"></div>
  <span class="ml-3 text-sm font-medium text-gray-900 dark:text-gray-300">Toggle me (checked)</span>
</label>

<label for="toggle-example-disabled" class="flex relative items-center mb-4 cursor-not-allowed">
  <input type="checkbox" id="toggle-example-disabled" class="sr-only" disabled>
  <div class="w-11 h-6 bg-gray-200 rounded-full border border-gray-200 toggle-bg dark:bg-gray-700 dark:border-gray-600"></div>
  <span class="ml-3 text-sm font-medium text-gray-900 dark:text-gray-600">Toggle me (disabled)</span>
</label>

If you want more details about Forms components, please check the official docs on Flowbite.

Copied code to clipboard!