How to build a custom file input with tailwind css
Tags: webdev, tailwindcss, css, html
Published: 2022-12-02 18:21:47

![custom file input](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xhbujr5cu3hyoaotw46s.png)

"`<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](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file)

And looks like this by default :

![native file input](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6me0iirg0voc5xgcsj1i.png)

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 :

![file input unstyled](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/767au3dgposinss7yhwe.png)

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.