Skip to main content
Package: @react-form-builder/components-mantine · Source code

​
Introduction

The FileInput component allows users to select files via a button or drag-and-drop. It can accept a single file or multiple files and supports clear and value display. The component is based on Mantine FileInput. It is included within the following NPM package: @react-form-builder/components-mantine.

​
Main properties

The following general properties are available within the Main tab:
NameTypeDescription
LabelstringLabel for the input
PlaceholderstringPlaceholder when no file selected
DescriptionstringHelper text below the field
ErrorstringError message; when set, applies error styling
AcceptstringAccepted file types (e.g. 'image/*', '.pdf')
MultiplebooleanIf true, allows selecting multiple files
Size'xs' | 'sm' | 'md' | 'lg' | 'xl'Size of the input
Variant'filled' | 'default' | 'unstyled'Visual variant
DisabledbooleanDisables the input
ClearablebooleanIf true, shows clear button
On changeeventFired when the file(s) change
At the bottom of the Main properties menu, you can find additional options:

​
Style properties

These are properties that allow to customize the size, color and other style properties of your component:
  • For Device: You can provide component’s style customization for all devices or specific devices by using this dropdown list. Refer to Adaptive Layout for more details.
  • Component > Class Name: Add a class name for your component for the subsequent styling if necessary.
  • Wrapper: The options below enable you to tailor the appearance of your component and customize it for a specific device type, as selected in the For Device property:
    NameTypeDescription
    WidthnumberSpecifies the width for your component
    HeightnumberSpecifies the height for your component
    Margin top/right/bottom/leftnumberMargin values for you component
    ColorstringAllows customizing the text color
    Background colorstringEnables customizing the background color
Last modified on April 16, 2026