Dropzone
A wide target for choosing or dropping files.
On this page
A dropzone is a wide target for choosing or dropping files. It is a <label> around a native file input that covers it invisibly. A click opens the picker, a file dropped anywhere on it lands in the input, and the form submits it, all without script. A dashed contour says "put it here".
Dropzone
<label class="dropzone"> <input type="file" class="dropzone-input" name="attachments" multiple accept="image/*,.pdf"> <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"> <path d="M12 16V4M7 9l5-5 5 5M5 20h14" /> </svg> <span class="dropzone-title">Drop files here or choose them</span> <span class="dropzone-description">PNG, JPG or PDF, up to 10 MB each</span></label>#Disabled
A disabled input drops the zone to disabled ink and stops it answering the pointer.
Disabled
<label class="dropzone"> <input type="file" class="dropzone-input" disabled> <span class="dropzone-title">Uploads are paused</span> <span class="dropzone-description">The project has reached its storage limit.</span></label>#What it does not do
The browser shows the chosen files nowhere in the zone, because the input is invisible, and CSS has no state for a file being dragged over an element. List the chosen files and highlight the zone during a drag from a small script when the form needs them. For one file in a row of fields, a plain file input shows its own file name and needs nothing more.
#Accessibility
- The input is the control: it takes focus, and the zone draws the ring around itself with
:has(.dropzone-input:focus-visible). - The title and description are the input's label. Say the limits a reader must meet, such as types and sizes, in the description.
#Classes
| Class | Description |
|---|---|
dropzone | The zone, on a label: a well with a dashed contour. It draws the focus ring for its input |
dropzone-input | The file input. It fills the zone invisibly, so files dropped anywhere on the zone are taken |
dropzone-title | What to do, in strong ink |
dropzone-description | The limits a reader must meet, such as types and sizes |