File input

A file Input is a form control that allows users to select one or more files from their local device for upload. It displays the selection and provides a way for users to clear it.

When to use

Uploading files

Use when when you need a user to upload a file from their local system. Common use cases include: Uploading a profile picture, attaching documents to a support ticket or an email, submitting assignments or reports, or uploading photos or videos to a gallery.

Uploading files

When to avoid

Bulk file management

If users need to upload a large number of files or manage a folder structure, a simple file input is inadequate. A more advanced multi-file uploader with progress bars and drag-and-drop support is a better solution.

Bulk file management

Cloud based files

To select a file from a service like Google Drive, Dropbox, or OneDrive, use a specific API integration or a dedicated file picker for that service.

Cloud based files

To select a file from a service like Google Drive, Dropbox, or OneDrive, use a specific API integration or a dedicated file picker for that service.

Cloud based files

To select a file from a service like Google Drive, Dropbox, or OneDrive, use a specific API integration or a dedicated file picker for that service.

Specifications

Label placement

Top

Please note that the stacked version does not truncate or wrap the label. Noting this, please try to keep the label as short as possible.

Left

Please note the wrapping and truncation rules for the left to right version and how the optional label is below the label.

Top

Please note that the stacked version does not truncate or wrap the label. Noting this, please try to keep the label as short as possible.

Left

Please note the wrapping and truncation rules for the left to right version and how the optional label is below the label.

Top

Please note that the stacked version does not truncate or wrap the label. Noting this, please try to keep the label as short as possible.

Left

Please note the wrapping and truncation rules for the left to right version and how the optional label is below the label.

Content

Placeholder

Single file

Multiple files

Placeholder

Single file

Multiple files

Placeholder

Single file

Multiple files

Anatomy

Label

Should indicate some kind of instruction for selection. If majority of fields are required in a single form, the "Option" label can be toggled on. If majority of fields are optional, the "Required asterisks" should instead be toggled on.

Upload icon

Helps to indicate items can be uploaded to this field.

Assistive text

Can communicate essential constraints, such as maximum file size and supported file formats.

File chip

Each uploaded file is represented by a dismissible chip that displays the truncated file name.

Clear icon (Optional)

Allows the user to remove all added files at once.

Value

File input