Skip to content
FormBrowse form components
ComponentsFormNew in 0.2

Dropzone

Drag-and-drop file target with hover and active states.

Live preview

Drop files herePDF, PNG, JPG up to 10 MB

Usage

Adapters:React stableVue stable
index.html
<label class="lm-dropzone">
  <strong class="lm-dropzone-title">Drop files</strong>
  <input type="file" class="sr-only" />
</label>

CSS classes (2)

ClassDescription
lm-dropzoneDashed bordered drop region
lm-dropzone-titleBold title

React props (3)

PropTypeDefaultDescription
acceptstringMIME types e.g. 'image/*'
maxSizenumberBytes
multipleboolean

Accessibility

  • Pair with a hidden <input type='file'> for keyboard fallback.
  • Announce upload progress via aria-live.

Spotted something wrong? Edit this entry on GitHub.