FileInput

The FileInput component lets a user upload files or attachments via drag-and-drop or by opening the user's file explorer when clicked.

For more information on how to use the features and props for this component, check out the developer documentation.

FileInputs can be formatted to accept on single files or multiple files. When the input detects files have been added, an onFilesAdded callback function is triggered. This callback should receive a list of files that were attached, and manage their state within your application.

The FileInput component accepts a list of files that will render FileUploadItems within a Grid underneath the input. The FileInput component allows for standard Form field structures such as being set required or disabled, as well as including a label, status, or info.

NameTypeDefaultDescription
classNamestringAdditional CSS classes.
disabledbooleanDisable the control. The browser defaults to false.
filesFileUploadItemProps[]An array of files that have been uploaded.
idstringSets DOM id for the control and associates label element via 'for' attribute. If an id is not pass, a random id will be generated for any render.
infoReactNodeIt is recommended to pass a simple string to offer guidance. Text will be styled based on status prop.
labelReactNodePass a string or a fragment with an Icon and string.
labelHiddenbooleanVisually hides the label region.
multiplebooleanfalse Allow multiple files to be selected from the OS specific file browser. NOTE: This does not restrict multiple files from being added via drag and drop. Restrict multi file drag and drop via onFilesAdded and custom info message.
namestringSets html name attribute for the underlying control. Useful for mapping to a data field.
onFilesAdded(files: File[]) => voidCalled when files are added either via the input or drop zone.
refRef<HTMLInputElement>Ref for the input element within the component's dom structure.
requiredbooleanIndicate if the field is required. The browser defaults to false.
status
'success' |'warning' |'error' 
Set visual state based on a validation state.