Go to Content
Design System
Playroom Storybook
#ClimateEmergency

FileInput Beta React-only

Open in Storybook Open in Figma

The FileInput serves for picking one or more files from the device storage.

HINT FileInput is accompanied by two sibling components that extend its functionality – FileDropzone and FileList. For an example of how to wire them all together, please refer to the GDS Storybook.

Loading demo…
Rules For Developers
  • At least one of the following props should be set: button, dropzone and/or renderDropzone

Dropzone

FileDropzone is used inside the FileInput as an area for adding files.

Loading demo…
Rules For Designers
  • Icon in dropzone is 48x48px, colour $color-gray-300 (#a3b5c9).
  • FileDropzone has a 1px dashed $color-gray-300 (#a3b5c9) border.
  • On hover border colour changes to $color-blue-300 (#135ee2) and the background to $color-gray-100 (#eef0f4).
Rules For Developers
  • FileDropzone should be passed in FileInput’s dropzone prop.

Custom Dropzone

For specific use cases where the default FileDropzone isn’t enough, a custom dropzone can be easily created.

Loading demo…
Rules For Developers
  • Use renderDropzone render prop to achieve a custom dropzone.

FileList

FileList is a component displaying a list of uploaded files. It should be used together with FileInput. FileList can optionally include buttons for downloading, deleting or performing other actions on the listed files.

Loading demo…

HINT To show the file size use showFileSize prop. There’s also the possibility to format the file size output using formatSizeFile.

Rules For Developers
  • The delete icon button can be hidden with showRemoveButton.
  • To set extra buttons, use extraButtons or render prop renderExtraButtons.
  • To render the file list item as a Link, pass said Link in defaultAction prop.

Custom FileList

For use cases where the default FileList is insufficient, custom list items can be easily created using the FileListItem component.

Loading demo…