DEV Community

Cover image for How to use a custom file input element with Tailwind CSS and Flowbite
Zoltán Szőgyényi for Themesberg

Posted on • Originally published at flowbite.com

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

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

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

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

Tailwind CSS File Input Dark mode

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

The results should look like this:

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

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

Discussion (0)