FileInput

Capture files from user
Import

Usage

Radius
xs
sm
md
lg
xl
Size
xs
sm
md
lg
xl
import { FileInput } from '@mantine/core';
function Demo() {
return (
<FileInput
placeholder="Pick file"
label="Your resume"
withAsterisk
/>
);
}

Controlled

When multiple is false:

import { useState } from 'react';
import { FileInput } from '@mantine/core';
function Demo() {
const [value, setValue] = useState<File | null>(null);
return <FileInput value={value} onChange={setValue} />;
}

When multiple is true:

import { useState } from 'react';
import { FileInput } from '@mantine/core';
function Demo() {
const [value, setValue] = useState<File[]>([]);
return <FileInput multiple value={value} onChange={setValue} />;
}

Multiple

Set multiple to allow user to pick more than one file:

import { FileInput } from '@mantine/core';
function Demo() {
return <FileInput label="Upload files" placeholder="Upload files" multiple />;
}

Accept

Set accept prop to restrict files selection to specific mime types:

import { FileInput } from '@mantine/core';
function Demo() {
return <FileInput label="Upload files" placeholder="Upload files" accept="image/png,image/jpeg" />;
}

Custom value component

import { FileInput, FileInputProps, Group, Center } from '@mantine/core';
import { IconPhoto } from '@tabler/icons';
function Value({ file }: { file: File }) {
return (
<Center
inline
sx={(theme) => ({
backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[7] : theme.colors.gray[1],
fontSize: theme.fontSizes.xs,
padding: '3px 7px',
borderRadius: theme.radius.sm,
})}
>
<IconPhoto size={14} style={{ marginRight: 5 }} />
<span
style={{
whiteSpace: 'nowrap',
textOverflow: 'ellipsis',
overflow: 'hidden',
maxWidth: 200,
display: 'inline-block',
}}
>
{file.name}
</span>
</Center>
);
}
const ValueComponent: FileInputProps['valueComponent'] = ({ value }) => {
if (Array.isArray(value)) {
return (
<Group spacing="sm" py="xs">
{value.map((file, index) => (
<Value file={file} key={index} />
))}
</Group>
);
}
return <Value file={value} />;
};
function Demo() {
return (
<>
<FileInput label="Multiple" placeholder="Multiple" multiple valueComponent={ValueComponent} />
<FileInput mt="md" label="Single" placeholder="Single" valueComponent={ValueComponent} />
</>
);
}

With icon

Download more icon variants from https://tabler-icons.io/i/upload
import { FileInput } from '@mantine/core';
import { IconUpload } from '@tabler/icons';
function Demo() {
return <FileInput label="Your resume" placeholder="Your resume" icon={<IconUpload size={14} />} />;
}

Get input ref

import { useRef } from 'react';
import { FileInput } from '@mantine/core';
function Demo() {
const ref = useRef<HTMLButtonElement>(null);
return <FileInput ref={ref} />;
}

Accessibility

Provide aria-label in case you use component without label or placeholder for screen reader support:

<FileInput /> // -> not ok, button is not labeled
<FileInput label="My input" /> // -> ok, button and label is connected
<FileInput placeholder="My input" /> // -> ok, button has label
<FileInput aria-label="My input" /> // -> ok, button is not visible but will be announced by screen reader
Download more icon variants from https://tabler-icons.io/i/search

FileInput component props

NameTypeDescription
accept
string
File input accept attribute, for example, "image/png,image/jpeg"
clearButtonLabel
string
aria-label for clear button
clearButtonTabIndex
0 | -1
Set the clear button tab index to disabled or default after input field
clearable
boolean
Allow to clear value
defaultValue
File
Uncontrolled input default value
description
ReactNode
Input description, displayed after label
descriptionProps
Record<string, any>
Props spread to description element
disabled
boolean
Disabled input state
error
ReactNode
Displays error message after input
errorProps
Record<string, any>
Props spread to error element
form
string
Input form attribute
icon
ReactNode
Adds icon on the left side of input
iconWidth
number
Width of icon section in px
inputContainer
(children: ReactNode) => ReactNode
Input container component, defaults to React.Fragment
inputWrapperOrder
("input" | "label" | "description" | "error")[]
Controls order of the Input.Wrapper elements
label
ReactNode
Input label, displayed before input
labelProps
Record<string, any>
Props spread to label element
multiple
false
Determines whether user can pick more than one file
name
string
Input name attribute
onChange
(payload: File) => void
Called when user picks files
radius
number | "xs" | "sm" | "md" | "lg" | "xl"
Input border-radius from theme or number to set border-radius in px
readOnly
boolean
Determines whether the user can change value
required
boolean
Sets required on input element
rightSection
ReactNode
Right section of input, similar to icon but on the right
rightSectionProps
Record<string, any>
Props spread to rightSection div element
rightSectionWidth
number
Width of right section, is used to calculate input padding-right
size
"xs" | "sm" | "md" | "lg" | "xl"
Input size
value
File
Controlled input value
valueComponent
FC<{ value: File | File[]; }>
Current value renderer
variant
"unstyled" | "default" | "filled"
Defines input appearance, defaults to default in light color scheme and filled in dark
withAsterisk
boolean
Determines whether required asterisk should be rendered, overrides required prop, does not add required attribute to the input
wrapperProps
Record<string, any>
Props passed to root element (InputWrapper component)

FileInput component Styles API

NameStatic selectorDescription
wrapper.mantine-FileInput-wrapperRoot Input element
invalid.mantine-FileInput-invalidInvalid input modifier
disabled.mantine-FileInput-disabledInvalid disabled modifier
icon.mantine-FileInput-iconInput icon wrapper on the left side of the input, controlled by icon prop
withIcon.mantine-FileInput-withIconInput element styles when used with icon, controlled by icon prop
input.mantine-FileInput-inputMain input element
rightSection.mantine-FileInput-rightSectionInput right section, controlled by rightSection prop
root.mantine-FileInput-rootRoot element
label.mantine-FileInput-labelLabel element styles, defined by label prop
error.mantine-FileInput-errorError element styles, defined by error prop
description.mantine-FileInput-descriptionDescription element styles, defined by description prop
required.mantine-FileInput-requiredRequired asterisk element styles, defined by required prop
placeholder.mantine-FileInput-placeholderPlaceholder text