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
When to avoid
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.
Content
Placeholder
Single file
Multiple files
Anatomy
1
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.
2
Upload icon
Helps to indicate items can be uploaded to this field.
3
Assistive text
Can communicate essential constraints, such as maximum file size and supported file formats.
4
File chip
Each uploaded file is represented by a dismissible chip that displays the truncated file name.
5
Clear icon (Optional)
Allows the user to remove all added files at once.