"<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.
Top comments (3)
Awesome
nice
And you, how do you create custom file input ?