Input

File upload

Lets the user choose files from their device, by a button or by dragging them in.

Attachments

PDF, PNG or JPEG, up to 10 MB each. Or drag and drop files into this area.

No files selected.

Also known as

A “Choose files” button, often inside a dashed box where files can be dropped. Chosen files are listed below with their names and sizes.

The button opens the operating system’s file picker.
Dropping files on the dashed box also chooses them. This demo uses the native <input type="file"> and handles drops on the surrounding box.
Each chosen file can be removed from the list. Removing moves focus back to the file button.

Key	Action
`Enter / Space`	Opens the file picker (on the file button), or removes a file (on its remove button).
`Tab`	Moves between the buttons.

Always provide a file button. Not everyone can drag, so a drop area alone is not enough (WCAG 2.2, 2.5.7 Dragging Movements).
Show the chosen files as a numbered list with the name, the size and a remove button, and say “No file selected” when there are none.
The accept attribute only narrows what the file picker shows. Check the files on the server too.

Button: A file upload is built around a button, but the button opens a file picker and keeps the chosen files as a form value.