Logo
hummingbird

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 need 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 success state and .is-invalid class for 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

You can 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">
  <span class='icon-[material-symbols--cloud-upload] text-base'></span>
  Upload file
</label>
<input type='file' id='btnFileUpload' />

<label class='btn btn-secondary' for="btnFileUploadSecondary">
  <span class='icon-[material-symbols--cloud-upload] text-base'></span>
  Upload file
</label>
<input type='file' id='btnFileUploadSecondary' />

<label class='btn btn-outline-primary' for="btnFileUploadOutlined">
  <span class='icon-[material-symbols--cloud-upload] text-base'></span>
  Upload file
</label>
<input type='file' id='btnFileUploadOutlined' />

<label class='btn btn-text-secondary' for="btnFileUploadText">
  <span class='icon-[material-symbols--cloud-upload] text-base'></span>
  Upload file
</label>
<input type='file' id='btnFileUploadText' />