Drop files into a named region or use its native picker. The frame denotes file reception; it is not a clickable surface and does not add another keyboard stop.
Project documents
Drop files here or choose below.
Picker and drop share type, size and count limits. Final validation waits for the drop; folders are rejected.
| Example | State |
|---|---|
|
Project documents Drop files here or choose below.
PDF or images · up to 5 MB each · 3 files
|
accepted |
|
Project documents Drop files here or choose below.
PDF or images · up to 5 MB each · 3 files
|
rejected |
|
Project documents Drop files here or choose below.
PDF or images · up to 5 MB each · 3 files
|
disabled |
| Verdict | Rule |
|---|---|
| Do | Provide the native FileInput as an equivalent keyboard and touch path; the region itself is not a button and has no tabindex. |
| Do | Use the same acceptance policy for picker and drop. Drag feedback is provisional because browsers can hide filenames, size and MIME type until drop. |
| Do | Track nested drag entry/leave without flicker; prevent file navigation on drop, reject directories and ignore non-file payloads. |
| Do | Show accepted drag feedback only for provisionally compatible content and show rejected feedback for known incompatibility. Final validation happens on drop. |
| Do | Disable both drop and picker together; suppress callbacks and drag feedback while unavailable. |
| Don’t | Do not make the whole region clickable or intercept keyboard editing or native file selection. |