File input
Examples
To render a file input, apply the class chi-file-input to 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.
The default size is -md.
-xs
-sm
-md
-lg
<!-- -xs -->
<input type="file" class="chi-file-input -xs" id="example-file-xs" aria-label="Choose file">
<label for="example-file-xs">No file chosen</label>
<!-- -sm -->
<input type="file" class="chi-file-input -sm" id="example-file-sm" aria-label="Choose file">
<label for="example-file-sm">No file chosen</label>
<!-- -md -->
<input type="file" class="chi-file-input -md" id="example-file-md" aria-label="Choose file">
<label for="example-file-md">No file chosen</label>
<!-- -lg -->
<input type="file" class="chi-file-input -lg" id="example-file-lg" aria-label="Choose file">
<label for="example-file-lg">No file chosen</label>
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-xs" aria-label="Choose file">
<label for="example-file-xs">No file chosen</label>
<!-- -sm -->
<input type="file" class="chi-file-input -sm" id="example-file-sm" aria-label="Choose file">
<label for="example-file-sm">No file chosen</label>
<!-- -md -->
<input type="file" class="chi-file-input -md" id="example-file-md" aria-label="Choose file">
<label for="example-file-md">No file chosen</label>
<!-- -lg -->
<input type="file" class="chi-file-input -lg" id="example-file-lg" aria-label="Choose file">
<label for="example-file-lg">No file chosen</label>
<!-- -xl -->
<input type="file" class="chi-file-input -xl" id="example-file-xl" aria-label="Choose file">
<label for="example-file-xl">No file chosen</label>
Web Component
Properties
Web component coming soon
Accessibility
Accessibility guidelines coming soon