How to use a custom file input element with Tailwind CSS and Flowbite

#tailwindcss #tutorial #webdev #opensource

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

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:

Awesome! Now you can go to Flowbite's 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:

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:

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: