File uploader
<gcds-file-uploader>

Also called: file upload, file input, dropzone.

A file uploader is a space to select and add supporting documentation.

• GitHub
• Figma

File uploader anatomy

1. The label provides the instruction for the component.
2. The hint text presents the types of files and other requirements, like maximum file size.
3. The button initiates the interface for file selection.
4. The file list item is a container showing an uploaded file.
5. The file name shows the name of the file that was added.
6. The remove button allows an uploaded file to be removed prior to submission.

Design and accessibility for file uploader

Write clear labels and hints

• Use the input label to set clear expectations about the kind of file a person can or needs to upload.
• Use the hint to specify any upload limitations.