How to use a custom file input element with Tailwind CSS and Flowbite
Tags: tailwindcss, tutorial, webdev, opensource
Published: 2022-04-29 13:41:57

Today I want to show you how you can use a custom styled file input element based on multiple styles and sizes using the utility classes from Tailwind CSS and components from Flowbite.

[Flowbite](https://flowbite.com) is the most popular component library based on Tailwind CSS with over 35 interactive UI components such as buttons, modals, navbars, dropdowns, and more.

[Tailwind CSS](https://tailwindcss.com) is the most popular utility-first CSS framework on the market which helps you build websites much faster without having to touch a CSS file.

So without further ado, let me show you how you can get started with a custom file input element!

[![Tailwind CSS File Input - Flowbite](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mzttqkjgayegc5wji937.png)](https://flowbite.com/docs/forms/file-input/)

## Tailwind CSS File Input - Flowbite

First things first, make sure that you have both Tailwind CSS and Flowbite installed in your project. You can check out the following guides to do that:

- [Install Tailwind CSS](https://tailwindcss.com/docs/installation)
- [Install Flowbite](https://flowbite.com/docs/getting-started/quickstart/)

Awesome! Now you can go to [Flowbite's file input](https://flowbite.com/docs/forms/file-input/) documentation and check out all of the examples and sizes.

For example, you can use the following code:

```
<label class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300" for="file_input">Upload file</label>
<input class="block w-full text-sm text-gray-900 border border-gray-300 rounded-lg cursor-pointer bg-gray-50 dark:text-gray-400 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400" id="file_input" type="file">
```

It also supports dark mode and it will look like this:

[![Tailwind CSS File Input Dark mode](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wl326ktpqd2yokk92789.png)](https://flowbite.com/docs/forms/file-input/)

You can also add a descriptive helper text below the input like this:

```
<label class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300" for="file_input">Upload file</label>
<input class="block w-full text-sm text-gray-900 border border-gray-300 rounded-lg cursor-pointer bg-gray-50 dark:text-gray-400 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400" aria-describedby="file_input_help" id="file_input" type="file">
<p class="mt-1 text-sm text-gray-500 dark:text-gray-300" id="file_input_help">SVG, PNG, JPG or GIF (MAX. 800x400px).</p>
```

The results should look like this:

[![File Input Helper Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2enw4acgky76b7tmo3f2.png)](https://flowbite.com/docs/forms/file-input/#helper-text)

By adding the `multiple` attribute to the input element you can also upload multiple files instead of just one:

```
<label class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300" for="multiple_files">Upload multiple files</label>
<input class="block w-full text-sm text-gray-900 border border-gray-300 rounded-lg cursor-pointer bg-gray-50 dark:text-gray-400 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400" id="multiple_files" type="file" multiple>
```

You can check out more file input examples built with Tailwind CSS and Flowbite by checking out the following resources:

- [Tailwind CSS File Input - Flowbite](https://flowbite.com/docs/forms/file-input/)
- [Flowbite - Tailwind CSS components](https://flowbite.com/docs/getting-started/introduction/)