Tailwind file input - examples & templates

File upload input built with Tailwind. Helps upload a single or many items. Supports images, files, and documents. Add items directly from your local storage.

Basic example

Default file input example

HTML

        
            
    <div class="flex justify-center">
      <div class="mb-3 w-96">
        <label for="formFile" class="form-label inline-block mb-2 text-gray-700">Default file input example</label>
        <input class="form-control
        block
        w-full
        px-3
        py-1.5
        text-base
        font-normal
        text-gray-700
        bg-white bg-clip-padding
        border border-solid border-gray-300
        rounded
        transition
        ease-in-out
        m-0
        focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none" type="file" id="formFile">
      </div>
    </div>

Multiple files input

Multiple files input example

HTML

        
            
    <div class="flex justify-center">
      <div class="mb-3 w-96">
        <label for="formFileMultiple" class="form-label inline-block mb-2 text-gray-700">Multiple files input example</label>
        <input class="form-control
        block
        w-full
        px-3
        py-1.5
        text-base
        font-normal
        text-gray-700
        bg-white bg-clip-padding
        border border-solid border-gray-300
        rounded
        transition
        ease-in-out
        m-0
        focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none" type="file" id="formFileMultiple" multiple>
      </div>
    </div>

    <!-- Custom scripts -->
    <script type="text/javascript">
      const checkbox = document.getElementById("flexCheckIndeterminate");
      checkbox.indeterminate = true;
    </script>

Disabled file input

Disabled file input example

HTML

        
            
    <div class="flex justify-center">
      <div class="mb-3 w-96">
        <label for="formFileDisabled" class="form-label inline-block mb-2 text-gray-700">Disabled file input example</label>
        <input class="form-control
        block
        w-full
        px-3
        py-1.5
        text-base
        font-normal
        text-gray-700
        bg-gray-100 bg-clip-padding
        border border-solid border-gray-300
        rounded
        transition
        ease-in-out
        m-0
        focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none" type="file" id="formFileDisabled" disabled>
      </div>
    </div>

Small file input

Small file input example

HTML

        
            
    <div class="flex justify-center">
      <div class="mb-3 w-96">
        <label for="formFileSm" class="form-label inline-block mb-2 text-gray-700">Small file input example</label>
        <input class="form-control
        block
        w-full
        px-2
        py-1
        text-sm
        font-normal
        text-gray-700
        bg-white bg-clip-padding
        border border-solid border-gray-300
        rounded
        transition
        ease-in-out
        m-0
        focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none" id="formFileSm" type="file">
      </div>
    </div>

Large file input

Large file input example

HTML

        
            
    <div class="flex justify-center">
      <div class="mb-3 w-96">
        <label for="formFileLg" class="form-label inline-block mb-2 text-gray-700">Large file input example</label>
        <input class="form-control
        block
        w-full
        px-2
        py-1.5
        text-xl
        font-normal
        text-gray-700
        bg-white bg-clip-padding
        border border-solid border-gray-300
        rounded
        transition
        ease-in-out
        m-0
        focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none" id="formFileLg" type="file">
      </div>
    </div>