Components

Tailwind CSS File Inputs - Madhuranjan UI

Discover a variety of file upload components built with Tailwind CSS. These file inputs are modern, fully responsive, support dark mode, and include features like helper text, dropzone functionality, and multiple file support.

Simple File Input

A clean and minimal file input field. Ideal for basic file uploads with full theme support and responsive design.

No file selected
1<div class="w-full max-w-md">
2  <label
3    for="file-upload"
4    class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1"
5  >
6    Upload File
7  </label>
8
9  <div class="flex items-center justify-between gap-3 border border-dashed border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-800 px-4 py-3">
10    <div class="flex items-center gap-2 text-gray-500 dark:text-gray-400 text-sm">

Custom Styled File Upload

A more advanced file input with a styled button using Tailwind’s file pseudo-classes. Matches your theme and UX.

1<div class="w-full max-w-4xl">
2  <label
3    for="file_input"
4    class="block mb-2 text-sm font-medium text-gray-700 dark:text-gray-300"
5  >
6    Upload File
7  </label>
8  <input
9    type="file"
10    id="file_input"

File Upload with Helper Text

Add extra guidance below the input field to inform users about file types, size, or rules.

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

1<div class="w-full max-w-md">
2  <label
3    for="file_input"
4    class="block mb-2 text-sm font-medium text-gray-700 dark:text-gray-300"
5  >
6    Upload File
7  </label>
8  <input
9    type="file"
10    id="file_input"

Upload Multiple Files

Easily allow users to select and upload more than one file at a time by using the multiple attribute.

You can upload multiple files (e.g. PNG, JPG, PDF).

1<div class="w-full max-w-md">
2  <label
3    for="file_input"
4    class="block mb-2 text-sm font-medium text-gray-700 dark:text-gray-300"
5  >
6    Upload Files
7  </label>
8  <input
9    type="file"
10    id="file_input"

File Input Size Variants

Choose from small, default, and large sizing for file input buttons to match your form layout.

1<div class="flex items-center justify-center p-2 md:p-5">
2 <div class="w-full max-w-md space-y-6">
3  <!-- Small File Input -->
4  <div>
5    <label
6      for="file_input_sm"
7      class="block mb-2 text-sm font-medium text-gray-700 dark:text-gray-300"
8    >
9      Small File Upload
10    </label>

Dropzone File Upload

Let users drag and drop files into a large dropzone area with iconography and styling. Fully click-to-upload capable.

1<div class="w-full max-w-xl">
2  <label
3    for="dropzone-file"
4    class="flex flex-col items-center justify-center w-full h-48 px-6 py-6 border-2 border-dashed rounded-lg cursor-pointer 
5           border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700 
6           transition"
7  >
8    <!-- Icon -->
9    <div class="flex flex-col items-center justify-center pt-4 pb-3 text-gray-500 dark:text-gray-400">
10      <svg
Input FieldTextarea