file-input.md

layout	title	description	group	toc	requires_js	previous	previousLink	next	nextLink
home	Tailwind CSS File Input - Flowbite	Get started with the file input component to let the user to upload one or more files from their device storage based on multiple styles and sizes	forms	true	true	Input Field	forms/input-field/	Search Input	forms/search-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.

{{< example id="default-file-upload-example" github="forms/file-input.md" show_dark=true >}} Upload file {{< /example >}}

Helper text

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

{{< example id="file-upload-helper-example" github="forms/file-input.md" show_dark=true >}} Upload file

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

{{< /example >}}

Multiple files

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

{{< example id="file-upload-multiple-example" github="forms/file-input.md" show_dark=true >}} Upload multiple files {{< /example >}}

Sizes

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

{{< example id="file-upload-sizes-example" github="forms/file-input.md" show_dark=true >}} Small file input

Default size

Large file input {{< /example >}}

Dropzone

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

{{< example id="file-upload-dropzone-example" github="forms/file-input.md" show_dark=true >}}

Click to upload or drag and drop

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

{{< /example >}}