Dropzone
Dropzones allow users to quickly upload files from their computers, as well as optionally launch the file select component.

Anatomy
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
