FileInput component supports Input and Input.Wrapper components features and all
input element props.
FileInput documentation does not include all features supported by the component – see Input documentation to learn about all available features.
multiple to allow user to pick more than one file:
accept prop to restrict files selection to specific mime types:
clearable prop to display clear button in the right section of the input
when file is selected. Note that if you define custom right section, clear button
will not be rendered.
rightSection props. These sections are rendered with absolute position 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:
leftSection– React node to render on the corresponding side of input
leftSectionWidth– controls width of the right section and padding on the corresponding side of the input. By default, it is controlled by component
pointer-eventsproperty of the section. By default, all pointer events are enabled. If you want to render a non-interactive element, set it to
noneto pass clicks through to the input.
Component Styles API
Hover over selectors to highlight corresponding elements
FileInput is used without
label prop, it will not be announced properly by screen reader:
aria-label to make the input accessible. In this case label will not be visible, but screen reader will announce it:
label prop is set, input will be accessible it is not required to set
FileInputProps type is a generic interface which accepts a single type argument: