File Input

Tailwind CSS and Alpine JS File Input

File inputs allow you to upload files from your computer to a website. They can be used to upload images, videos, documents, and more.

Default file input

A file input with a label.

HTML 
<div class="">
    <label class="" for="fileInput">Upload File</label>
    <input id="fileInput" type="file" class="" />
</div>

File input with helper text

A file input with a label and helper text.

PNG, JPG, WebP - Max 5MB
HTML 
<div class="">
    <label for="fileInput" class="">Upload File</label>
    <input id="fileInput" type="file" class="" />
    <small class="">PNG, JPG, WebP - Max 5MB</small>
</div>

File input states

Examples of file inputs in error and success states.

Error: Please choose a file for upload
HTML 
<!-- File input with error -->
<div class="">
    <label for="fileInput" class="">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" aria-hidden="true" fill="currentColor" class="w-4 h-4">
            <path d="M5.28 4.22a.75.75 0 0 0-1.06 1.06L6.94 8l-2.72 2.72a.75.75 0 1 0 1.06 1.06L8 9.06l2.72 2.72a.75.75 0 1 0 1.06-1.06L9.06 8l2.72-2.72a.75.75 0 0 0-1.06-1.06L8 6.94 5.28 4.22Z"/>
        </svg>
        Upload File
    </label>
    <input id="fileInput" type="file" class="" />
    <small class="">Error: Please choose a file for upload</small>
</div>

<!-- File input success -->
<div class="">
    <label for="fileInput" class="">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" aria-hidden="true" fill="currentColor" class="w-4 h-4">
            <path fill-rule="evenodd" d="M12.416 3.376a.75.75 0 0 1 .208 1.04l-5 7.5a.75.75 0 0 1-1.154.114l-3-3a.75.75 0 0 1 1.06-1.06l2.353 2.353 4.493-6.74a.75.75 0 0 1 1.04-.207Z" clip-rule="evenodd" />
        </svg>
        Upload File
    </label>
    <input id="fileInput" type="file" class="" />
</div>

File input with drag & drop

A file input with drag and drop functionality.

Cover Picture
or drag and drop here
PNG, JPG, WebP - Max 5MB
HTML 
<div class="">
    <span class="">Cover Picture</span>
    <div class="">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" fill="currentColor" class="w-12 h-12 opacity-75">
            <path fill-rule="evenodd" d="M10.5 3.75a6 6 0 0 0-5.98 6.496A5.25 5.25 0 0 0 6.75 20.25H18a4.5 4.5 0 0 0 2.206-8.423 3.75 3.75 0 0 0-4.133-4.303A6.001 6.001 0 0 0 10.5 3.75Zm2.03 5.47a.75.75 0 0 0-1.06 0l-3 3a.75.75 0 1 0 1.06 1.06l1.72-1.72v4.94a.75.75 0 0 0 1.5 0v-4.94l1.72 1.72a.75.75 0 1 0 1.06-1.06l-3-3Z" clip-rule="evenodd"/>
        </svg>
        <div class="">
            <label for="fileInputDragDrop" class="">
                <input id="fileInputDragDrop" type="file" class="" aria-describedby="validFileFormats" />
                Browse
            </label>
             or drag and drop here
        </div>
        <small id="validFileFormats"></small>
    </div>
</div>

Keyboard Navigation

Key Action
Tab Input gets the focus
Space File chooser dialog opens
Esc File chooser dialog closes