Capture files from user
FileInput component supports Input and Input.Wrapper component features and all input element props. The FileInput documentation does not include all features supported by the component – see the Input documentation to learn about all available features.
Set loading prop to display a loading indicator. By default, the loader is displayed on the right side of the input. You can change the position with the loadingPosition prop to 'left' or 'right' . This is useful for async operations like API calls, searches, or validations:
When multiple is false :
When multiple is true :
FileInput can be used with uncontrolled forms the same way as a native input[type="file"] . Set the name attribute to include file input value in FormData object on form submission. To control the initial value in uncontrolled forms, use the defaultValue prop.
Example usage of uncontrolled FileInput with FormData :
Set multiple to allow the user to pick more than one file:
Set the accept prop to restrict file selection to specific mime types:
Set the clearable prop to display a clear button in the right section of the input when a file is selected. Note that if you define a custom right section, the clear button will not be rendered.
The clearSectionMode prop determines how the clear button and rightSection are rendered:
FileInput supports leftSection and rightSection props. These sections are rendered with absolute positioning inside the input wrapper. You can use them to display icons, input controls, or any other elements.
You can use the following props to control sections styles and content:
FileInput supports the Styles API ; you can add styles to any inner element of the component with the classNames prop. Follow the Styles API documentation to learn more.
Component Styles API
Hover over selectors to highlight corresponding elements
If FileInput is used without the label prop, it will not be announced properly by screen readers:
Set aria-label to make the input accessible. In this case the label will not be visible, but screen readers will announce it:
If the label prop is set, the input will be accessible and it is not required to set aria-label :
FileInputProps type is a generic interface which accepts a single type argument: the multiple value.