Structure
Class Example
.mdst-file-input
.mdst-input .mdst-file-input__field
Variants
Class Example
.mdst-file-input--borderless
.mdst-file-input--inverted
States
Attribute Example
disabled
accept
multiple

Drag-and-drop included. The native <input type="file"> supports dragging files onto it out of the box. The button is styled via ::file-selector-button and the filename updates automatically on selection.

Usage
<!-- Basic file input -->
<div class="mdst-file-input">
  <input type="file" class="mdst-input mdst-file-input__field" />
</div>

<!-- Borderless -->
<div class="mdst-file-input mdst-file-input--borderless">
  <input type="file" class="mdst-input mdst-file-input__field" />
</div>

<!-- Inverted button -->
<div class="mdst-file-input mdst-file-input--inverted">
  <input type="file" class="mdst-input mdst-file-input__field" />
</div>

<!-- Disabled -->
<div class="mdst-file-input">
  <input type="file" class="mdst-input mdst-file-input__field" disabled />
</div>

<!-- Accept only images -->
<div class="mdst-file-input">
  <input type="file" class="mdst-input mdst-file-input__field" accept="image/*,.png,.jpg,.jpeg,.gif,.webp" />
</div>

<!-- Multiple files -->
<div class="mdst-file-input">
  <input type="file" class="mdst-input mdst-file-input__field" multiple />
</div>