Input

Give <input> and <textarea> an upgrade with custom styles, sizing, focus states, and more.

Example

                
                  <div class="mb-6">
                    <label for="exampleInput1" class="inline-block mb-2">Email address</label>
                    <input type="email" class="w-full leading-5 relative py-3 px-5 rounded text-gray-800 bg-white border border-gray-300 overflow-x-auto focus:outline-none focus:border-gray-400 focus:ring-0 dark:text-gray-400 dark:bg-gray-700 dark:border-gray-700 dark:focus:border-gray-600" id="exampleInput1" placeholder="name@example.com">
                  </div>
                  <div class="mb-6">
                    <label for="exampleTextarea1" class="inline-block mb-2">Example textarea</label>
                    <textarea class="w-full leading-5 relative py-3 px-5 rounded text-gray-800 bg-white border border-gray-300 overflow-x-auto focus:outline-none focus:border-gray-400 focus:ring-0 dark:text-gray-400 dark:bg-gray-700 dark:border-gray-700 dark:focus:border-gray-600" id="exampleTextarea1" rows="3"></textarea>
                  </div>
                
              

Disabled

                
                  <div class="mb-6">
                    <label for="exampleInput1" class="inline-block mb-2">Disabled input</label>
                    <input type="text" class="w-full leading-5 relative py-3 px-5 rounded text-gray-800 bg-gray-100 border border-gray-300 overflow-x-auto focus:outline-none focus:border-gray-400 focus:ring-0 cursor-not-allowed dark:text-gray-400 dark:bg-gray-600 dark:border-gray-600 dark:focus:border-gray-600" id="exampleInput1" placeholder="Disabled input" aria-label="Disabled input example" disabled>
                  </div>
                
              

Sizing

                
                  <div class="mb-6">
                    <label for="exampleInput1" class="inline-block mb-2">Small</label>
                    <input type="text" class="w-full leading-5 relative text-sm py-2 px-4 rounded text-gray-800 bg-white border border-gray-300 overflow-x-auto focus:outline-none focus:border-gray-400 focus:ring-0 dark:text-gray-400 dark:bg-gray-700 dark:border-gray-700 dark:focus:border-gray-600" id="exampleInput1" placeholder="small">
                  </div>
                  <div class="mb-6">
                    <label for="exampleInput1" class="inline-block mb-2">Normal</label>
                    <input type="text" class="w-full leading-5 relative py-3 px-5 rounded text-gray-800 bg-white border border-gray-300 overflow-x-auto focus:outline-none focus:border-gray-400 focus:ring-0 dark:text-gray-400 dark:bg-gray-700 dark:border-gray-700 dark:focus:border-gray-600" id="exampleInput1" placeholder="normal">
                  </div>
                  <div class="mb-6">
                    <label for="exampleInput1" class="inline-block mb-2">Large</label>
                    <input type="text" class="w-full leading-5 relative text-2xl py-4 px-8 rounded text-gray-800 bg-white border border-gray-300 overflow-x-auto focus:outline-none focus:border-gray-400 focus:ring-0 dark:text-gray-400 dark:bg-gray-700 dark:border-gray-700 dark:focus:border-gray-600" id="exampleInput1" placeholder="large">
                  </div>
                
              

Datalist

                
                  <label for="exampleDataList" class="inline-block mb-2">Datalist example</label>
                  <input class="w-full leading-5 relative py-3 px-5 rounded text-gray-800 bg-white border border-gray-300 overflow-x-auto focus:outline-none focus:border-gray-400 focus:ring-0 dark:text-gray-400 dark:bg-gray-700 dark:border-gray-700 dark:focus:border-gray-600" list="datalistOptions" id="exampleDataList" placeholder="Type to search...">
                  <datalist id="datalistOptions">
                    <option value="Burger">
                    <option value="Pizza">
                    <option value="Fried Rice">
                    <option value="Fried Chicken">
                    <option value="Kebab">
                  </datalist>
                
              

Readonly

                
                  <div class="flex flex-wrap flex-row items-center -mx-4 mb-6">
                    <label for="staticEmail" class="flex-shrink max-w-full px-4 w-full sm:w-1/6">Email</label>
                    <div class="flex-shrink max-w-full px-4 w-full sm:w-5/6">
                      <input type="text" readonly class="fw-full leading-5 relative py-3 px-5 rounded text-gray-800 bg-white border-0 border-gray-300 overflow-x-auto focus:outline-none focus:border-gray-400 focus:ring-0 dark:text-gray-400 dark:bg-gray-700 dark:border-gray-700 dark:focus:border-gray-600" id="staticEmail" value="email@example.com">
                    </div>
                  </div>
                  <div class="flex flex-wrap flex-row items-center -mx-4 mb-6">
                    <label for="inputPassword" class="flex-shrink max-w-full px-4 w-full sm:w-1/6">Password</label>
                    <div class="flex-shrink max-w-full px-4 w-full sm:w-5/6">
                      <input type="password" class="w-full leading-5 relative py-3 px-5 rounded text-gray-800 bg-white border border-gray-300 overflow-x-auto focus:outline-none focus:border-gray-400 focus:ring-0 dark:text-gray-400 dark:bg-gray-700 dark:border-gray-700 dark:focus:border-gray-600" id="inputPassword">
                    </div>
                  </div>
                
              

File input

                
                  <div class="mb-6">
                    <label for="formFile" class="inline-block mb-2">Default file input example</label>
                    <input class="w-full leading-5 relative py-3 px-5 rounded text-gray-800 bg-white border border-gray-300 overflow-x-auto focus:outline-none focus:border-gray-400 focus:ring-0 dark:text-gray-400 dark:bg-gray-700 dark:border-gray-700 dark:focus:border-gray-600" type="file" id="formFile">
                  </div>
                  <div class="mb-6">
                    <label for="formFileMultiple" class="inline-block mb-2">Multiple files input example</label>
                    <input class="w-full leading-5 relative py-3 px-5 rounded text-gray-800 bg-white border border-gray-300 overflow-x-auto focus:outline-none focus:border-gray-400 focus:ring-0 dark:text-gray-400 dark:bg-gray-700 dark:border-gray-700 dark:focus:border-gray-600" type="file" id="formFileMultiple" multiple>
                  </div>
                  <div class="mb-6">
                    <label for="formFileDisabled" class="inline-block mb-2">Disabled file input example</label>
                    <input class="w-full leading-5 relative py-3 px-5 rounded text-gray-800 bg-white border border-gray-300 overflow-x-auto focus:outline-none focus:border-gray-400 focus:ring-0 dark:text-gray-400 dark:bg-gray-700 dark:border-gray-700 dark:focus:border-gray-600" type="file" id="formFileDisabled" disabled>
                  </div>
                
              

Color

                
                  <div class="mb-6">
                    <label for="exampleColorInput" class="inline-block mb-2">Color picker</label>
                    <input type="color" class="block w-10 h-10 leading-5 relative rounded text-gray-800 bg-white border border-gray-300 overflow-x-auto focus:outline-none focus:border-gray-400 focus:ring-0 dark:text-gray-400 dark:bg-gray-700 dark:border-gray-700 dark:focus:border-gray-600" style="max-width: 3rem" id="exampleColorInput" value="#1e40af" title="Choose your color">
                  </div>