Tailwind File input component

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


Basic example

File input is a field which user can use to upload one or more files (photos, documents or any other file type) from the local storage.

Most common use examples of file upload component is CSV upload CRM system, avatar picture upload, simple GIF upload.

        
            
      <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

Use the multiple attribute to the input to add multiple files with one input.

        
            
      <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

Use the disabled attribute to make file input unusable and un-clickable.

        
            
      <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

File input size can be made small.

        
            
      <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

File input size can be made large.

        
            
      <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>
      
        
    

If you are looking for more advanced options, try Bootstrap File Input from MDBootstrap.