File Input

File Inputs allow users to select and upload one or more files to a designated system or application destination. They are essential in forms and workflows where document submission, media uploads, or data import is required.

Upload Button

A clickable element that opens the native file picker, allowing users to browse and select files from their device.

default

Supported formats: jpg, png, pdf. Maximum size: 100 MB

Variations

single-upload

Supported formats: jpg, png, pdf. Maximum size: 100 MB

multiple-upload

Supported formats: jpg, png, pdf. Maximum size: 100 MB

image-preview

Supported formats: jpg, png, pdf. Maximum size: 100 MB

Uploaded images (JPG, PNG, GIF, SVG) show a live preview/thumbnail for quick recognition. Each image should include filename, size, and status.

States

uploading
Government_services_report_final_version_updated.pdf • 0.1 MB
success
Government_services_report_final_version_updated.pdf • 0.1 MB
uploaded
Government_services_report_final_version_updated.pdf • 0.1 MB
error
Government_services_report_final_version_updated.pdf • 102.1 MB
error-messages
Government_services_report_final_version_updated.pdf • 102.1 MB
File exceeds size limit, max size is 100 MB

Edge Cases

file-name: truncation
Government_services_report_final_version_updated.pdf • 0.1 MB
file-name: hover
Government_services_report_final_version_updated.pdf • 0.1 MB

Drag and Drop Zone

A designated drop zone where users can drag and drop files to initiate the upload process quickly and intuitively.

default

Drag and drop or choose files

Drop files to upload

Supported formats: jpg, png, pdf.

Maximum size: 100 MB

Variations

single-upload

Drag and drop or choose file

Drop files to upload

Supported formats: jpg, png, pdf.

Maximum size: 100 MB

multiple-upload

Drag and drop or choose files

Drop files to upload

Supported formats: jpg, png, pdf.

Maximum size: 100 MB

States

default

Drag and drop or choose files

Drop files to upload

Supported formats: jpg, png, pdf.

Maximum size: 100 MB

hover

Drag and drop or choose files

Drop files to upload

Supported formats: jpg, png, pdf.

Maximum size: 100 MB

active

Drag and drop or choose files

Drop files to upload

Supported formats: jpg, png, pdf.

Maximum size: 100 MB

focus

Drag and drop or choose files

Drop files to upload

Supported formats: jpg, png, pdf.

Maximum size: 100 MB

disabled

Drag and drop or choose files

Drop files to upload

Supported formats: jpg, png, pdf.

Maximum size: 100 MB

Accessibility

All components are designed to meet accessibility standards in compliance with WCAG 2.1 AA guidelines. This includes ensuring adequate contrast, proper labeling, and target sizes on pointer and touch devices. For a comprehensive understanding, we recommend reviewing internal Accessibility Recommendations.


These considerations ensure that all users, including those with disabilities or limited mobility, can interact with the components easily and effectively.