DEV Community

Cover image for How to build a custom file input with tailwind css
Méschac Irung for Tailus

Posted on • Updated on

How to build a custom file input with tailwind css

custom file input

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

native file input

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

It should look like this now :

file input unstyled

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>
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (3)

Collapse
 
shubhamtiwari909 profile image
Shubham Tiwari

Awesome

Collapse
 
shrafathussain profile image
shrafathussain

nice

Collapse
 
meschacirung profile image
Méschac Irung

And you, how do you create custom file input ?