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

6 1

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:

AWS Security LIVE!

Join us for AWS Security LIVE!

Discover the future of cloud security. Tune in live for trends, tips, and solutions from AWS and AWS Partners.

Learn More

Top comments (1)

Collapse
 
bhaidar profile image
Bilal Haidar

Hi, is there a way to change the File Input button background? Thanks

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay