File

Basic Example #

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.

<label for="formFile-1" class="form-label">Default file input example</label
><input type="file" class="form-control" id="formFile-1" />

Sizing #

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="mb-4">
    <label for="formFile-2-sm" class="form-label">Small file input example</label
    ><input type="file" class="form-control form-control-sm" id="formFile-2-sm" />
</div>
<div class="mb-4">
    <label for="formFile-2-nl" class="form-label">Normal file input example</label
    ><input type="file" class="form-control" id="formFile-2-nl" />
</div>
<div>
    <label for="formFile-2-lg" class="form-label">Large file input example</label
    ><input type="file" class="form-control form-control-lg" id="formFile-2-lg" />
</div>

States #

A file can be in several different states. Below you can see a demo of these states:

<div class="mb-4">
    <label for="formFile-3-normal" class="form-label">Normal</label
    ><input type="file" class="form-control" id="formFile-3-normal" />
</div>
<div class="mb-4">
    <label for="formFile-3-disabled" class="form-label">Disabled</label
    ><input type="file" class="form-control" id="formFile-3-disabled" disabled="" />
</div>
<div class="mb-4">
    <label for="formFile-3-valid" class="form-label">Valid</label
    ><input type="file" class="form-control is-valid" id="formFile-3-valid" />
</div>
<div>
    <label for="formFile-3-invalid" class="form-label">Invalid</label
    ><input type="file" class="form-control is-invalid" id="formFile-3-invalid" />
</div>