File input
The native file input in the input fill, with its browse button drawn as a flat tinted button.
Examples
File input
PDF or PNG, up to 10 MB.
Multiple and disabled
Anatomy
input.input[type=file] | Smaller padding and type than a text input, muted file name, pointer cursor. |
::file-selector-button | The browser's browse button, restyled: one step darker fill, full radius, darker again on hover. |
API
| Attribute | Values | Description |
|---|---|---|
accept | <types> | File types to offer in the picker, e.g. image/* or .pdf,.png. A hint, not validation. |
multiple | boolean | Lets the user pick several files; the input then shows a count. |
disabled | boolean | Halves the opacity, as on every .input. |
required | boolean | As on .input: once left empty, :user-invalid draws the danger ring. |
Accessibility
- Label it like any input. The browse button's text comes from the browser and is in the user's language; don't try to replace it.
- For a large drop target, use the dropzone. It wraps the same input, so keyboard and screen-reader behaviour stay native.
| Key | Effect |
|---|---|
| Enter / Space | Opens the file picker. |