File input

File inputs are used to select one or more files from a user's device storage.

Examples

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

Base #

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-file-input" id="file01" aria-label="Choose file">
<label for="file01">No file chosen</label>
<script>
var inputFiles = document.querySelectorAll('input[type="file"].chi-file-input');

Array.prototype.forEach.call(inputFiles, 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 = e.target.value.split('\').pop();
    }

    if (fileName) {
      label.innerHTML = fileName;
    }
  });
});
</script>

Disabled #

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-file-input" id="unique-id-di1" aria-label="Choose file" disabled>
<label for="unique-id-di1">No file chosen</label>

<script>
var inputFiles = document.querySelectorAll('input[type="file"].chi-file-input');

Array.prototype.forEach.call(inputFiles, 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 = e.target.value.split('\').pop();
    }

    if (fileName) {
      label.innerHTML = fileName;
    }
  });
});
</script>

Sizes #

File inputs support sizes:-xs,-sm,-md,-lg,-xl. The default size is -md.

-xs

-sm

-md

-lg

-xl


<!-- -xs -->
<input type="file" class="chi-file-input -xs" id="example-file-input_xs" aria-label="Choose file">
<label for="example-file-input_xs">No file chosen</label>

<!-- -sm -->
<input type="file" class="chi-file-input -sm" id="example-file-input_sm" aria-label="Choose file">
<label for="example-file-input_sm">No file chosen</label>

<!-- -md -->
<input type="file" class="chi-file-input -md" id="example-file-input_md" aria-label="Choose file">
<label for="example-file-input_md">No file chosen</label>

<!-- -lg -->
<input type="file" class="chi-file-input -lg" id="example-file-input_lg" aria-label="Choose file">
<label for="example-file-input_lg">No file chosen</label>

<!-- -xl -->
<input type="file" class="chi-file-input -xl" id="example-file-input_xl" aria-label="Choose file">
<label for="example-file-input_xl">No file chosen</label>

Web Component

Properties

Web component coming soon

Accessibility

Accessibility guidelines coming soon