File Drop
A styled file input drop zone using label.file-drop.
Default
<label class="file-drop">
<input type="file" />
Drag files here or choose from folder
</label>With filename
<label class="file-drop">
<input
type="file"
onchange="
this.nextElementSibling.textContent =
this.files[0]?.name ?? 'Drag files here or choose from folder'
"
/>
<span>Drag files here or choose from folder</span>
</label>With field
Attachment
Max 10 MB.
<div class="field">
<span>Attachment</span>
<label class="file-drop">
<input type="file" />
Drag files here or choose from folder
</label>
<small>Max 10 MB.</small>
</div>