On this page
Overview
Show code, LogoUpload.tsx
Variants
- Medium
A file that is the main content of a form. The default.
- Small
Attachments in a dense form or a row.
Show code, Sizes.tsx
Anatomy
Drop zone
Icon
Label
Description
Show code, DropZoneAnatomy.tsx
Behaviour
States
A zone can take only some kinds of file, and turns the others away.
- While the application works on the files, a spinner replaces the icon.
- While pending, the zone takes no more.
Attach several files
A zone can take several files at once. The application lists the files it took, each with Remove.
Show code, AttachDocuments.tsx
Adapting to width
A zone fills its container, and its text wraps.
Show code, NarrowZone.tsx
Rules
A drop zone says what to add and what is happening, and the files chosen show beside it.
Use it when
- Adding a file to a form or a page by dropping or choosing it, such as a logo
- Attaching several files at once, such as documents to a message
Show code, SaysWhatIsHappening.tsx
Show code, SilentPending.tsx
What was chosen
Show what was chosen beside the zone or in its place, with Replace and Remove.
One button
The whole zone is one button, so it holds no links or other controls.
Labels
Say what to add in the label, and which files fit in the description.
Accessibility
| Key | Action |
|---|---|
| Tab, Shift+Tab | Moves to and from the zone. |
| Enter, Space | Opens the file picker. |