File Upload

File upload lets users choose one or more files from their device storage and upload it. This input control is commonly found in forms, but can also serve as a standalone element.

Guidelines for using file upload

Single upload is the default. Accept multiple files by using the “multiple” attribute.

Be sure to include a label with helper text if there are any restrictions (such as file type or size) that the user should know.

Relevant WCAG guidelines

• SC 1.3.1 Info and Relationships
• SC 2.5.3 Label in Name
• SC 2.4.3 Focus Order
• SC 2.4.7 Focus Visible
• SC 3.3.1 Error Identification
• SC 3.3.2 Labels or Instructions
• SC 3.3.6 Error Prevention
• SC 4.1.2 Name, Role, Value

Code example

See example pen by U-M Library Design System (@umlibrary-designsystem) on CodePen.