Tailwind forms

Responsive forms built with Tailwind. Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms.


Basic example

Account Type
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!-- Required form plugin -->
<link href="https://cdn.jsdelivr.net/npm/@tailwindcss/custom-forms@0.2.1/dist/custom-forms.css" rel="stylesheet">

<div class="p-4 shadow-md rounded-md text-left" style="max-width: 400px;">
  <label class="block">
    <span class="text-gray-700">Name</span>
    <input class="form-input mt-1 block w-full" placeholder="Jane Doe">
  </label>
  
  <div class="mt-4">
    <span class="text-gray-700">Account Type</span>
    <div class="mt-2">
      <label class="inline-flex items-center">
        <input type="radio" class="form-radio" name="accountType" value="personal">
        <span class="ml-2">Personal</span>
      </label>
      <label class="inline-flex items-center ml-6">
        <input type="radio" class="form-radio" name="accountType" value="busines">
        <span class="ml-2">Business</span>
      </label>
    </div>
  </div>
  
  <label class="block mt-4">
    <span class="text-gray-700">Requested Limit</span>
    <select class="form-select mt-1 block w-full">
      <option>$1,000</option>
      <option>$5,000</option>
      <option>$10,000</option>
      <option>$25,000</option>
    </select>
  </label>
  
  <div class="flex mt-6">
    <label class="flex items-center">
      <input type="checkbox" class="form-checkbox">
      <span class="ml-2">I agree to the <span class="underline">privacy policy</span></span>
    </label>
  </div>
</div>