File selection
File selection lets users choose one or more files from their device.
Use a native <input type="file"> to let users select files. Selecting a file does not upload it; provide separate feedback when an application starts or completes an upload.
Examples
Section titled “Examples”Drag and drop
Section titled “Drag and drop”Show selected files in a list with their filenames, sizes, and actions to remove them. Let users select files by browsing or dragging and dropping them onto the selection area.
- Use a clear label such as “Select files” or “Browse files”.
- Show selected filenames and file sizes so users can confirm their selection.
🚫 Don’t
Section titled “🚫 Don’t”- Don’t hide the only file-selection mechanism behind an unlabeled icon.
- Don’t make drag and drop the only way to select files.
- Don’t upload files immediately after selection; let the user confirm the upload first.