Supported formats: jpg, png, pdf. Maximum size: 100 MB
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.
Variations
Upload button variations for single file, multiple files, and image preview modes.
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) should show a live preview/thumbnail to aid quick recognition. Include filename, size, and status where applicable.
States
Upload button states including uploading, success, uploaded, error, and error-message.
uploading
success
uploaded
error
Max file size: 5 MB. Upload a larger file to see error state.
error-message
Max file size: 5 MB. Upload a larger file to see error.
Edge Cases
Filename truncation and tooltip hover behavior for long file names.
file-name: truncation
file-name: hover
Hover over the filename to see the full name in a tooltip.
Drag and Drop Zone
A designated drop zone where users can drag and drop files to initiate the upload process quickly and intuitively.
Drag and drop or choose files
Supported formats: jpg, png, pdf\nMaximum size: 5 MB
Variations
Drop zone variations for single file and multiple file uploads.
single-upload
Drag and drop or choose files
Supported formats: jpg, png, pdf. Maximum size: 100 MB
multiple-upload
Drag and drop or choose files
Supported formats: jpg, png, pdf\nMaximum size: 5 MB
States
Drop zone states including active (drag-over) and disabled.
active
Drag and drop or choose files
Supported formats: jpg, png, pdf\nMaximum size: 5 MB
disabled
Drag and drop or choose files
Supported formats: jpg, png, pdf\nMaximum size: 5 MB