File browser

Use our custom file inputs for consistent cross-browser styling, built-in customization, and lightweight JavaScript.

Form's file on Bootstrap
Default

The file input is the most gnarly of the bunch and requires additional JavaScript if you’d like to hook them up with functional Choose file… and selected file name text.

<div class="form-file"><input class="form-file-input" id="customFile" type="file" /><label class="form-file-label" for="customFile"><span class="form-file-text">Choose file...</span><span class="form-file-button">Browse</span></label></div>
Sizing

You may also choose from small and large file inputs to match our similarly sized text inputs.

<div class="form-file form-file-lg mb-3"><input class="form-file-input" id="customFileLg" type="file" /><label class="form-file-label" for="customFileLg"><span class="form-file-text">Choose file...</span><span class="form-file-button">Browse</span></label></div>
<div class="form-file form-file-sm"><input class="form-file-input" id="customFileSm" type="file" /><label class="form-file-label" for="customFileSm"><span class="form-file-text">Choose file...</span><span class="form-file-button">Browse</span></label></div>

Thank you for creating with Falcon |
2020 © Themewagon

v3.0.0-alpha10