Dropzone
Dropzones allow users to quickly upload files from their computers, as well as optionally launch the file select component.
Demo and Developer GuidelinesAnatomy
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).
Types
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.
Basic
Default
Hover
Disabled
Icon
Default
Default
Disabled
Behavior
Placement
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).
A dropzone can be placed directly into a form element.
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.
Specifications
Default Styling
Hover Styling
Disabled Styling
Padding
