File input

Best practices

Always include a label with the File input and use descriptive help text to communicate the types of files that are allowed and error text to help users get unstuck.

When to use

• Uploading one or more files
• Uploading files by dragging and dropping

When not to use

• If the same information can be inputted in a simpler or more efficient way without requiring file uploads. For example, using text inputs, dropdowns, or date pickers might be more appropriate.

Anatomy

1. Label – to describe the upload section.
2. File area/drop zone – the action to select or drop a file to upload.
3. Helper text – to help the user make an informed selection.
4. Placeholder – provides additional information before a file is added.
5. Single file – a file that is ready be uploaded.
6. Delete – will remove the added single file (only for single files).
7. Multiple files – more than one file ready for upload.
8. Remove all – will remove all added files (only for multiple files).
9. Error message

Behaviour

The file input uploads one or more files by clicking the input field that prompts a file selection dialog. Once the user has selected one or more files from the dialog, the selected files will populate inside the file input on the page.

When including a button as the action to upload a file, use either a primary or secondary neutral button depending on your use case.

Drag and drop

The File input component lets users upload files by dragging and dropping the files into the area inside the field. When dragging files into the drop zone area, the input border changes in colour, thickness, and to a dashed style to indicate the area has been activated and is ready for files. The style of cursor change is rendered by the browser.

Validation

When a file cannot be uploaded successfully it will show an error state. Error messages should provide clear guidance to help the user resolve the error.

Responsive behaviour

Use an ellipsis (…) if the filename extends beyond the width of its parent element.

Files

Content guidelines

Use labels

Labels serve to clearly present what’s expected. They’re especially important for people who don’t see other visual cues.

Consider including placeholder text

To prompt users to upload a file, consider including relevant placeholder text to indicate the task isn’t done yet. Remember that placeholder text is visually less important, low in contrast, and disappears once users enter anything. So do not include anything necessary, such as what file types are allowed.

Use help messages

Include any necessary information (file size and type or format limitations) as clear as possible to help users before they attempt to upload files.