Dropzones allow users to quickly upload files from their computers, as well as optionally launch the file select component.Demo and Developer GuidelinesFigma Component
The dropzone is a block element that fills its container. Instructive text is centered inside of the dropzone with a button-styled link (for accessibility).
Generally, use the icon dropzone when the design allows for more space, or use the basic dropzone when less space is available. However, either dropzone can be used and their functionality is the same.
Dropzone in a Form
A dropzone can live within a form, but it will take up the full width of the parent (unless otherwise defined).
While editing a form, the uploaded files appear as a list of tokens. The user can remove a file from the list by clicking on the x icon in the token. Clicking the token value/label launches a lightbox containing a preview of the file.
Dropzone in a File Select
A dropzone can also appear within a file select component.