Returnless UI

Drop zone ​

The drop zone component lets users upload files by dragging and dropping the files into an area on a page, or activating a button.

Props
modelValue?:
File[]
Defaults to unknown
accepts?:
FileAccepts
Defaults to "*"
The file types to accept.
label:
string
Defaults to unknown
actionLabel:
string
Defaults to unknown
The label for the action button.
multiple?:
boolean
Defaults to false
Whether to accept multiple files.
Events
update:modelValue:
[value: File[]]

Usage ​

File size must be less than 20MB
[]

Best practices ​

Drop zones should:

  • Inform users when the file(s) can't be uploaded.
    • When possible, use validation errors on drag to detect and explain things like file size limits or file types accepted.
    • Use the banner component with a critical status to communicate errors that happen on the server.
  • Provide feedback once the file(s) have been dropped and uploading begins.
  • Provide a file upload button to allow users to select files for upload in traditional way.

Validation errors ​

The drop zone component validates file type by default. File types you wish to accept can be defined by editing the accept property. This component also accepts custom validations using the customValidator property. When validation fails, the components sets itself to error mode.

Content guidelines ​

Client-side validation error messages ​

Validation error messages should be:

  • Explicit: help users understand why their file can't be uploaded and what they should change to successfully upload their file
  • In sentence case: capitalize only the first word in a message
  • Concise: use simple, clear language that can be read at a glance: For example:
    • File size must be less than 20MB
    • File type must be .pdf, .doc, or .docx

Accessibility ​

The drop zone component builds on the native HTML <input type="upload" /> element. It includes a visual <button> as well as a drag and drop area that can receive keyboard focus.

Keyboard support ​

To upload a file with the keyboard, users can interact with the drag-and-drop region.

  • To give the input keyboard focus, use the tab key (or shift + tab when tabbing backwards)
  • To activate the input, use the enter/return or space keys