File Drop
A styled file input drop zone using label.file-drop.
Default
<label class="file-drop">
<input type="file" />
<svg><!-- upload icon --></svg>
Drag files here or choose from folder
</label>With hint
<label class="file-drop">
<input type="file" accept="image/*" />
<svg><!-- upload icon --></svg>
Drag image here or choose from folder
<small>PNG, JPG or WebP up to 10 MB</small>
</label>With filename
<label class="file-drop">
<input
type="file"
onchange="
this.nextElementSibling.nextElementSibling.textContent =
this.files[0]?.name ?? 'Drag files here or choose from folder'
"
/>
<svg><!-- upload icon --></svg>
<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" />
<svg><!-- upload icon --></svg>
Drag files here or choose from folder
</label>
<small>Max 10 MB.</small>
</div>