File Input

Get started with the file input element that lets users upload a single or multiple files from their machine to the server.

The input element is commonly used to upload a single file or multiple files from the user's machine to the server. This element is also a part of form-control.

Basic File Input #

Lets get started with the basic file input element through an example.

Upload

File Input Sizes #

There will always be size options. Because size matters. Append the form-control--{size} class to the form-control element.

Disabled State #

Follow this examples to apply the disabled option.

Upload

Custom File Input #

Let's customize the file input with TailwindCSS.

Choose File

<div>
                                    <label for="inputFile1" class="cursor-pointer">
                                        <span class="button button--outline button--soft button--icon">
                                            <i data-icon="feather__paperclip"></i>
                                        </span>
                                    </label>
                                    <input id="inputFile1" type="file" class="hidden" />
                                </div>
                                <div>
                                    <label for="inputFile2" class="cursor-pointer">
                                        <span class="button button--outline button--soft scheme-primary">
                                            <i data-icon="feather__upload"></i>
                                            <span>Choose File</span>
                                        </span>
                                    </label>
                                    <input id="inputFile2" type="file" class="hidden" />
                                </div>

Messages

Notifications

File Input

Basic File Input #

File Input Sizes #

Disabled State #

Custom File Input #