Tailwind css input file

Tailwind CSS File Input

The file input component can be used to upload one or more files from the device storage of the user available in multiple sizes, styles, and variants and built with the utility-first classes from Tailwind CSS including support for dark mode.

Make sure that you have included Flowbite as a plugin inside your Tailwind CSS project to apply all the necessary styles for the file input component.

File upload example #

Get started with a simple file input component to let users upload one single file.

label class="block mb-2 text-sm font-medium text-gray-900 dark:text-white" for="file_input">Upload filelabel> 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">

Helper text #

Add a descriptive helper text to inform users the allowed extensions and sizes of the files.

SVG, PNG, JPG or GIF (MAX. 800x400px).

label class="block mb-2 text-sm font-medium text-gray-900 dark:text-white" for="file_input">Upload filelabel> 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>

Multiple files #

Apply the multiple attribute to the file input component to allow more files to be uploaded.

label class="block mb-2 text-sm font-medium text-gray-900 dark:text-white" for="multiple_files">Upload multiple fileslabel> 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>

Sizes #

Choose from the small, default, and large file input sizing options.

label class="block mb-2 text-sm font-medium text-gray-900 dark:text-white" for="small_size">Small file inputlabel> input class="block w-full mb-5 text-xs 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="small_size" type="file">  label class="block mb-2 text-sm font-medium text-gray-900 dark:text-white" for="default_size">Default sizelabel> input class="block w-full mb-5 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="default_size" type="file">  label class="block mb-2 text-sm font-medium text-gray-900 dark:text-white" for="large_size">Large file inputlabel> input class="block w-full text-lg 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="large_size" type="file">

Dropzone #

The dropzone file input component can be used to upload one or more files by clicking anywhere in the area.

Источник

How to build a custom file input with tailwind css

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. //MDN And looks like this by default : Let’s be honest, no one will appreciate seeing a component looking like this in a modern UI. 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). But is still easy to do, here my way of doing :

Nesting the input 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.

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. We need to hide the input element using hidden attribute or the «hidden» tailwind css class as we don’t need it to appear on the screen.

Adding other content

Right here we don’t have anything on our screen, we need to add an illustration icon, a title and a description or something like that.

   
Upload a file
 Max 2 MO 
  

It should look like this now : Right now we only wrote html, let’s add some tailwind css utilities to style the component.

Adding tailwind css utilities

We need to add border, rounded corners and a background to the label tag, the illustration is bigger than it should be, we need to align the image and the div tag containing the title and the description in the same row. Let’s add some tailwind css utilities to the elements to have the needed result :

 . 
Upload a file
 Max 2 MO 
  

Conclusion

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

Источник

Tailwind CSS File Input — Flowbite

The file input component can be used to upload one or more files from the device storage of the user available in multiple sizes, styles, and variants and built with the utility-first classes from Tailwind CSS including support for dark mode.

Make sure that you have included Flowbite as a plugin inside your Tailwind CSS project to apply all the necessary styles for the file input component.

File upload example #

Get started with a simple file input component to let users upload one single file.

label class="block mb-2 text-sm font-medium text-gray-900 dark:text-white" for="file_input">Upload filelabel> 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">

Helper text #

Add a descriptive helper text to inform users the allowed extensions and sizes of the files.

SVG, PNG, JPG or GIF (MAX. 800x400px).

label class="block mb-2 text-sm font-medium text-gray-900 dark:text-white" for="file_input">Upload filelabel> 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>

Multiple files #

Apply the multiple attribute to the file input component to allow more files to be uploaded.

label class="block mb-2 text-sm font-medium text-gray-900 dark:text-white" for="multiple_files">Upload multiple fileslabel> 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>

Sizes #

Choose from the small, default, and large file input sizing options.

label class="block mb-2 text-sm font-medium text-gray-900 dark:text-white" for="small_size">Small file inputlabel> input class="block w-full mb-5 text-xs 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="small_size" type="file"> label class="block mb-2 text-sm font-medium text-gray-900 dark:text-white" for="default_size">Default sizelabel> input class="block w-full mb-5 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="default_size" type="file"> label class="block mb-2 text-sm font-medium text-gray-900 dark:text-white" for="large_size">Large file inputlabel> input class="block w-full text-lg 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="large_size" type="file">

Dropzone #

The dropzone file input component can be used to upload one or more files by clicking anywhere in the area.

Источник