How to build a custom file input with tailwind css

#webdev #tailwindcss #css #html

"<input> elements with type="file" let the user choose one or more files from their device storage. Once chosen, the files can be uploaded to a server using form submission, or manipulated using JavaScript code and the File API". Source : MDN

And looks like this by default :

Styling the file input is easier than it seems to be, actually you can't really design a modern looking file input by applying utilities directly to the input:file element itself (If exists any way, let me know in the comments).

In this article, I will guide you step by step to building a simple modern looking file input using Tailwind Css.

Nest the input tag into the label tag

You can use label and input tags as peer elements into a div but I prefer nesting the input tag into the label to avoid using a div tag, you have the same result for both ways of doing.

<label for="doc">
   <input type="file" id="doc" name="doc" hidden/>
</label>

The for attribute of the label tag have to have the same content as the id attribute of the input tag so that the input action can be trigged by pressing the label element.

You need to hide the input element using hidden attribute or the "hidden" tailwind css utility as you don't need it to appear on the screen.

Adding other content

Right here you shouldn't have anything on your screen, you need to add an illustration icon, a short title and a description to your component.

<label for="doc">
   <img src="https://demo.tailus.io/images/icons/upload.webp" alt="upload icon" width="512" height="512" />
   <div>
      <h4>Upload a file</h4>
      <span>Max 2 MO </span>
   </div>
   <input type="file" id="doc" name="doc" hidden/>
</label>

It should look like this now :

Right now you only wrote html, let's add some tailwind css utilities to style the component.

Adding tailwind css utilities

You need to add border, rounded corners and a background to the label tag, the illustration is bigger than it should be, you need to align the image and the div tag containing the title and the description in the same row...

Add some tailwind css utilities to the elements to have the needed result :

<label for="doc" class="flex items-center p-4 gap-3 rounded-3xl border border-gray-300 border-dashed bg-gray-50 cursor-pointer">
   <img class="h-16 w-auto" src="https://demo.tailus.io/images/icons/upload.webp" alt="">. 
   <div class="space-y-2">
      <h4 class="text-base font-semibold text-gray-700">Upload a file</h4>
      <span class="text-sm text-gray-500">Max 2 MO</span>
   </div>
   <input type="file" id="doc" name="doc" accept="png, jpg" hidden/>
</label>

And voila, you should have the file input component looking like in the article cover.

Conclusion

This is how I create a custom file input with tailwind css, there is still different ways of doing to have the same result, you can go even far with JavaScript by adding more behaviors.