Usage
The File Input allows the user to select one or many files from the user's file system and upload them to the application.
Anatomy
Button: The shape that encloses the icon and action. When selected, the user's default file explorer will open.
Icon: Gives more definition to the upload action. Can be used in place of the label due to lack of space or on mobile.
Label: A single action associated with the File Input, such as 'Browse' or 'Upload content.'
Input field: The input field contains placeholder text that 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.
The entire component is clickable and, when selected, the user's default file explorer will open.
For detailed documentation on our File Input anatomy, view the design specs.
Types
Our File Input that allows the user to upload a single file through their file explorer or drag and drop.
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.
States
Normal
Normal state is how the File Input looks by default before any interaction or action is taken.
Hover
Hover state occurs when the user hovers over the File Input with their cursor.
Pressed
Pressed state occurs very briefly when the File Input is being activated by the user when pressing down on the mouse button.
Drag
Drag state occurs when the user drags the file over the File Input while pressing down on the mouse button before releasing.
Disabled
Disabled state occurs when the File Input action is not available to the user.
Disabled File Inputs should only be used when an action can be taken within the current UI to enable them. If no action can be taken to enable the File Input, then the File Input should be hidden instead of disabled.
Error
Error state occurs when the user takes an action that is not possible, such as moving on in the workflow without uploading a file, or attempts to upload a file that is not permitted, such as a file that is too large.
Responsive layout
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
Drag and drop
When using the drag and drop functionality of a 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.
Best practices
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.
Group the File Input with related fields and include a label so users know what type of file is required.
The File Input should not be grouped with unrelated fields without a label or descriptive action text.