Stable

File inputs

Allows the user to select one or many files from the user's file system and upload to the application.

Usage

The file input allows the user to select one or many files from the user's file system and upload to the application.

Anatomy

Single-file input anatomy

The single-file input consists of an action and input field.

Icon (optional): Gives more definition to the upload action.
Action: A single action associated with the file input, such as 'Browse' or 'Upload content.'
Input field: A clickable container that brings up the file explorer.
Input text: Placeholder text will instruct users to select file(s) or drop file(s) into the dropzone for upload. Once a file has been selected, the filename will appear.

For detailed documentation on our single-file input anatomy, view the ZUI single-file input design specs.

Types

We have two types of file inputs that allow the user to upload the appropriate amount of files through their file explorer or drag and drop.

Single-file input

Allows the user to upload one file through their file explorer or by dropping the file in the dropzone.

Multiple-file input (WIP)

Responsive layout

Single-file input mobile

The behavior and location of the single-file input remain unchanged on mobile devices with viewports smaller than 720px. The action text can be omitted due to lack of space on mobile; in this case, the upload icon should be used to represent the action.

This icon can be found in the icon documentation under Standard system icons.

Behavior

Form

When the single-file input is used in a form, it should be grouped with related fields and include a label so users know what type of file is required.

For detailed documentation on our forms pattern, view the forms documentation.

Single-file input form

Icon

An icon can be added to assist the user in quickly identifying the action needed to be taken. The icon or action text can be omitted due to a lack of space, such as on mobile or a form with a decreased width.

Single-file input icon

Drag and drop

When using the drag and drop functionality of a single-file input, the dropzone should be highlighted only when the user drags a file over the input. This will allow the user to differentiate between multiple inputs on a page and ensure that the correct file is being uploaded.

Single-file input drag and drop

Best practices

Single-file input action do

The action text can be edited to better apply to the content being uploaded or verbiage on the page.

Single-file input action do not

The action text should not be overly specific or call out file details, such as a Word or Excel file type. Details, such as file type and size, should be called out in description text or a tooltip.