ComponentsIn tools

Drop zone

A dashed target for files. Dashed means empty and waiting; it turns solid once something is in it.

Used onTools image inputs

Drop an image or click to choosePNG, JPG or WebP, up to 10 MB

Show code

<label class="drop"><svg class="icon" viewBox="0 0 256 256" aria-hidden="true"><path d="…"/></svg> Drop an image or click to choose<small>PNG, JPG or WebP, up to 10 MB</small><input type="file" class="sr-only" accept="image/*"></label>

The whole zone is a <label> for a visually hidden file input, so click and keyboard work without script. Add .over while dragging.