File Input

File Input lets users upload files

File input

It uses the native HTML <input type="file"> element and is styled with utility classes.

HTML

<input type="file" class="form-control" />
<input type="file" class="form-control-fill" />

File input with label

File Input can be used with a label for better accessibility.

HTML

<div class="form-field">
  <label class="form-label">Avatar</label>
  <input type="file" class="form-control" />
</div>
<div class="form-field">
  <label class="form-label">Avatar</label>
  <input type="file" class="form-control-fill" />
</div>

Sizing

Set heights using classes like .form-control-sm and .form-control-lg for small and large file inputs. Default is medium.

HTML

<input type="file" class="form-control form-control-sm" />
<input type="file" class="form-control" />
<input type="file" class="form-control form-control-lg" />
<input type="file" class="form-control-fill form-control-sm" />
<input type="file" class="form-control-fill" />
<input type="file" class="form-control-fill form-control-lg" />

Color variants

To get selector button styles, use the following classes: .form-control-{primary, secondary, info, success, warning}. .form-control-primary only needs to be applied to the fill variant.

HTML

<input type="file" class="form-control-fill form-control-primary" />
<input type="file" class="form-control-fill form-control-secondary" />
<input type="file" class="form-control form-control-info" />
<input type="file" class="form-control form-control-secondary" />

Disabled

Make input fields appear disabled by adding the disabled attribute.

HTML

<input type="file" class="form-control-fill" placeholder="Disabled" disabled />
<input type="file" class="form-control" placeholder="Disabled" disabled />

Validation

Indicate validation states by adding the .is-valid class for the success state and the .is-invalid class for the error state to input fields.

HTML

<div class="form-field">
  <label class="form-label">Avatar</label>
  <input type="file" class="form-control-fill is-valid" />
</div>
<div class="form-field">
  <label class="form-label">Avatar</label>
  <input type="file" class="form-control is-valid" />
</div>
<div class="form-field">
  <label class="form-label">Avatar</label>
  <input type="file" class="form-control-fill is-invalid" />
</div>
<div class="form-field">
  <label class="form-label">Avatar</label>
  <input type="file" class="form-control is-invalid" />
</div>

File upload button

Create a custom file upload button by hiding the default file input and using a styled label element.

HTML

<label class='btn btn-primary' for="btnFileUpload">
  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path fill="currentColor" d="M11 20H6.5q-2.275 0-3.887-1.575T1 14.575q0-1.95 1.175-3.475T5.25 9.15q.625-2.3 2.5-3.725T12 4q2.925 0 4.963 2.038T19 11q1.725.2 2.863 1.488T23 15.5q0 1.875-1.312 3.188T18.5 20H13v-7.15l1.6 1.55L16 13l-4-4l-4 4l1.4 1.4l1.6-1.55z" stroke-width="0.5" stroke="currentColor"/></svg>
  Upload file
</label>
<input type='file' id='btnFileUpload' />

<label class='btn btn-secondary' for="btnFileUploadSecondary">
  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path fill="currentColor" d="M11 20H6.5q-2.275 0-3.887-1.575T1 14.575q0-1.95 1.175-3.475T5.25 9.15q.625-2.3 2.5-3.725T12 4q2.925 0 4.963 2.038T19 11q1.725.2 2.863 1.488T23 15.5q0 1.875-1.312 3.188T18.5 20H13v-7.15l1.6 1.55L16 13l-4-4l-4 4l1.4 1.4l1.6-1.55z" stroke-width="0.5" stroke="currentColor"/></svg>
  Upload file
</label>
<input type='file' id='btnFileUploadSecondary' />

<label class='btn btn-outline-primary' for="btnFileUploadOutlined">
  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path fill="currentColor" d="M11 20H6.5q-2.275 0-3.887-1.575T1 14.575q0-1.95 1.175-3.475T5.25 9.15q.625-2.3 2.5-3.725T12 4q2.925 0 4.963 2.038T19 11q1.725.2 2.863 1.488T23 15.5q0 1.875-1.312 3.188T18.5 20H13v-7.15l1.6 1.55L16 13l-4-4l-4 4l1.4 1.4l1.6-1.55z" stroke-width="0.5" stroke="currentColor"/></svg>
  Upload file
</label>
<input type='file' id='btnFileUploadOutlined' />

<label class='btn btn-text-secondary' for="btnFileUploadText">
  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path fill="currentColor" d="M11 20H6.5q-2.275 0-3.887-1.575T1 14.575q0-1.95 1.175-3.475T5.25 9.15q.625-2.3 2.5-3.725T12 4q2.925 0 4.963 2.038T19 11q1.725.2 2.863 1.488T23 15.5q0 1.875-1.312 3.188T18.5 20H13v-7.15l1.6 1.55L16 13l-4-4l-4 4l1.4 1.4l1.6-1.55z" stroke-width="0.5" stroke="currentColor"/></svg>
  Upload file
</label>
<input type='file' id='btnFileUploadText' />