Upload input

An upload input lets users upload a single file, or multiple files, within a form.

When to use

Use an upload input:

  • in forms alongside other fields or inputs
  • when there's no need for the user to see a preview or thumbnail on screen of what they've uploaded

Don't use an upload input:

  • if the only input on the screen is for uploading files
  • if you need to show users a thumbnail or preview image of their upload on the same screen


You can use the upload input to let users upload a single file or multiple files.

An upload input with a single file.
An upload input with multiple files.
Best practice

You can use an upload input on both desktop and mobile screens. Its width should be aligned with the other input fields in a form.


Users can tap or click anywhere on the input field to trigger the upload as the whole area is interactive. This allows them to select the file(s) they want to upload from their device.

Once a file has been successfully uploaded, users can click or tap on the cell to see a preview of the file, allowing them to double check what they uploaded.

Users can also remove a file by pressing the clear button, at which point we should display a prompt alert to confirm the action. This is a native dialogue alert on iOS and Android, or a modal on web.


The upload input has 4 different states.

An upload input in the default state.
An upload input in the loading state.
An upload input with an uploaded state.
An upload input where the upload has failed.


The label describes the type of file the user needs to upload, for example 'Invoice'. It should also be consistent with the other labels in the form.

An upload input with a descriptive label.
An upload input with a question as the label.


In the default state, the title is a call to action. The default copy for this state is 'Upload file' or 'Upload files'. But if you need to change this, treat it like writing button copy. That means starting with a verb, and using as few words as possible.

An upload input with a short instruction as the title.
An upload input with a long title.


The description describes the state of the upload. For the failed state, it's important to make this copy as specific as possible so the user understands what went wrong and what they can do to fix it.

A failed upload where the description tells the user why the upload has failed.
A failed upload where the description just tells the user that it's failed.



Developer documentation




Web documentation