File input

File inputs are used to select one or more files from a users device storage.


To render a file input, apply the class chi-input to an input type="file" and add a label next to it.


This HTML Blueprint requires JavaScript to update the label content once a file or files have been selected. You may use your own JavaScript solution, or use Chi's example below.
<input type="file" class="chi-input" id="file01" aria-label="Choose file">
<label for="file01">No file chosen</label>

var inputFiles = document.querySelectorAll('input[type="file"].chi-input');, function(input) {
  var label = input.nextElementSibling;

  input.addEventListener('change', function(e) {
    var fileName = '';

    if (this.files && this.files.length > 1) {
      fileName = this.files.length + ' files selected';
    } else {
      fileName ='\\').pop();

    if (fileName) {
      label.innerHTML = fileName;


File inputs supports a full spectrum of sizes: -sm, -md, -lg, -xl. The default size is -md.

<!-- -sm -->
<input type="file" class="chi-input -sm" id="file02" aria-label="Choose file">
<label for="file02">No file chosen</label>
<!-- -md -->
<input type="file" class="chi-input -md" id="file03" aria-label="Choose file">
<label for="file03">No file chosen</label>
<!-- -lg -->
<input type="file" class="chi-input -lg" id="file04" aria-label="Choose file">
<label for="file04">No file chosen</label>
<!-- -xl -->
<input type="file" class="chi-input -xl" id="file05" aria-label="Choose file">
<label for="file05">No file chosen</label>

Web Component


Web component coming soon


Accessibility guidelines coming soon