FileInput

A file input supporting both inline and drag-and-drop dropzone modes.

Examples

Default

Upload

Choose file

<SingleFileStory />

Dropzone

Upload

Choose files

<DropzoneStory />

With Description

UploadPDF, PNG, or JPG up to 10 MB

Choose file

<WithDescriptionStory />

Accept Images

UploadPNG or JPG only

Choose file

<AcceptImagesStory />

Disabled

Upload

Choose file

<FileInput isDisabled label="Upload" onChange={() => {}} value={null} />

Loading

Upload

Choose file

<FileInput isLoading label="Upload" onChange={() => {}} value={null} />

Required

Upload · Required

Choose file

<RequiredStory />

Error

Upload

Choose file

A file is required.

<FileInput
  label="Upload"
  onChange={() => {}}
  status={{message: 'A file is required.', type: 'error'}}
  value={null}
/>

Small

Upload

Choose file

<FileInput label="Upload" onChange={() => {}} size="sm" value={null} />

Large

Upload

Choose file

<FileInput label="Upload" onChange={() => {}} size="lg" value={null} />

Dropzone Disabled

Upload

Choose files

<FileInput
  isDisabled
  isMultiple
  label="Upload"
  mode="dropzone"
  onChange={() => {}}
  value={[]}
/>

API

FileInput

A file input supporting both inline and drag-and-drop dropzone modes.

When isMultiple: true, isOptional: false, isRequired: false

Prop	Type	Default	Description
isMultiple*	true	—	Whether multiple files can be selected.
maxFiles	number	—	Maximum number of files allowed.
onChange*	(files: File[]) => void	—	Called when the selected files change.
value*	File[]	—	Currently selected files.
accept	string	—	Comma-separated MIME types or file extensions the input accepts.
className	string	—	Additional CSS class names applied to the root element.
data-testid	string	—	Test ID applied to the hidden file input.
description	ReactNode	—	Supporting text rendered below the label.
isDisabled	boolean	false	Whether the input is disabled.
isLabelHidden	boolean	false	Whether to visually hide the label.
isLoading	boolean	false	Whether the input is in a loading state.
label*	string	—	Field label text.
labelIcon	IconComponent	—	Icon shown before the label.
labelTooltip	ReactNode	—	Tooltip content shown next to the label.
maxSize	number	—	Maximum file size in bytes.
mode	"input" | "dropzone"	'input'	Display mode: inline input or drag-and-drop dropzone.
placeholder	string	—	Placeholder text shown when no file is selected.
ref	Ref<HTMLInputElement>	—	Ref forwarded to the hidden file input element.
size	"sm" | "md" | "lg"	'md'	Visual size of the input.
status	InputStatus	—	Validation status displayed below the input.
style	CSSProperties	—	Inline styles applied to the root element.
isOptional	false	—
isRequired	false	—

When isMultiple: true, isOptional: true, isRequired: false

Prop	Type	Default	Description
isMultiple*	true	—	Whether multiple files can be selected.
maxFiles	number	—	Maximum number of files allowed.
onChange*	(files: File[]) => void	—	Called when the selected files change.
value*	File[]	—	Currently selected files.
accept	string	—	Comma-separated MIME types or file extensions the input accepts.
className	string	—	Additional CSS class names applied to the root element.
data-testid	string	—	Test ID applied to the hidden file input.
description	ReactNode	—	Supporting text rendered below the label.
isDisabled	boolean	false	Whether the input is disabled.
isLabelHidden	boolean	false	Whether to visually hide the label.
isLoading	boolean	false	Whether the input is in a loading state.
label*	string	—	Field label text.
labelIcon	IconComponent	—	Icon shown before the label.
labelTooltip	ReactNode	—	Tooltip content shown next to the label.
maxSize	number	—	Maximum file size in bytes.
mode	"input" | "dropzone"	'input'	Display mode: inline input or drag-and-drop dropzone.
placeholder	string	—	Placeholder text shown when no file is selected.
ref	Ref<HTMLInputElement>	—	Ref forwarded to the hidden file input element.
size	"sm" | "md" | "lg"	'md'	Visual size of the input.
status	InputStatus	—	Validation status displayed below the input.
style	CSSProperties	—	Inline styles applied to the root element.
isOptional*	true	—
isRequired	false	—

When isMultiple: true, isOptional: false, isRequired: true

Prop	Type	Default	Description
isMultiple*	true	—	Whether multiple files can be selected.
maxFiles	number	—	Maximum number of files allowed.
onChange*	(files: File[]) => void	—	Called when the selected files change.
value*	File[]	—	Currently selected files.
accept	string	—	Comma-separated MIME types or file extensions the input accepts.
className	string	—	Additional CSS class names applied to the root element.
data-testid	string	—	Test ID applied to the hidden file input.
description	ReactNode	—	Supporting text rendered below the label.
isDisabled	boolean	false	Whether the input is disabled.
isLabelHidden	boolean	false	Whether to visually hide the label.
isLoading	boolean	false	Whether the input is in a loading state.
label*	string	—	Field label text.
labelIcon	IconComponent	—	Icon shown before the label.
labelTooltip	ReactNode	—	Tooltip content shown next to the label.
maxSize	number	—	Maximum file size in bytes.
mode	"input" | "dropzone"	'input'	Display mode: inline input or drag-and-drop dropzone.
placeholder	string	—	Placeholder text shown when no file is selected.
ref	Ref<HTMLInputElement>	—	Ref forwarded to the hidden file input element.
size	"sm" | "md" | "lg"	'md'	Visual size of the input.
status	InputStatus	—	Validation status displayed below the input.
style	CSSProperties	—	Inline styles applied to the root element.
isOptional	false	—
isRequired*	true	—

When isMultiple: false, isOptional: false, isRequired: false

Prop	Type	Default	Description
isMultiple	false	—	Whether multiple files can be selected.
maxFiles	undefined	—	Maximum number of files allowed. Only applicable when isMultiple is true.
onChange*	(file: File | null) => void	—	Called when the selected file changes.
value*	File | null	—	Currently selected file.
accept	string	—	Comma-separated MIME types or file extensions the input accepts.
className	string	—	Additional CSS class names applied to the root element.
data-testid	string	—	Test ID applied to the hidden file input.
description	ReactNode	—	Supporting text rendered below the label.
isDisabled	boolean	false	Whether the input is disabled.
isLabelHidden	boolean	false	Whether to visually hide the label.
isLoading	boolean	false	Whether the input is in a loading state.
label*	string	—	Field label text.
labelIcon	IconComponent	—	Icon shown before the label.
labelTooltip	ReactNode	—	Tooltip content shown next to the label.
maxSize	number	—	Maximum file size in bytes.
mode	"input" | "dropzone"	'input'	Display mode: inline input or drag-and-drop dropzone.
placeholder	string	—	Placeholder text shown when no file is selected.
ref	Ref<HTMLInputElement>	—	Ref forwarded to the hidden file input element.
size	"sm" | "md" | "lg"	'md'	Visual size of the input.
status	InputStatus	—	Validation status displayed below the input.
style	CSSProperties	—	Inline styles applied to the root element.
isOptional	false	—
isRequired	false	—

When isMultiple: false, isOptional: true, isRequired: false

Prop	Type	Default	Description
isMultiple	false	—	Whether multiple files can be selected.
maxFiles	undefined	—	Maximum number of files allowed. Only applicable when isMultiple is true.
onChange*	(file: File | null) => void	—	Called when the selected file changes.
value*	File | null	—	Currently selected file.
accept	string	—	Comma-separated MIME types or file extensions the input accepts.
className	string	—	Additional CSS class names applied to the root element.
data-testid	string	—	Test ID applied to the hidden file input.
description	ReactNode	—	Supporting text rendered below the label.
isDisabled	boolean	false	Whether the input is disabled.
isLabelHidden	boolean	false	Whether to visually hide the label.
isLoading	boolean	false	Whether the input is in a loading state.
label*	string	—	Field label text.
labelIcon	IconComponent	—	Icon shown before the label.
labelTooltip	ReactNode	—	Tooltip content shown next to the label.
maxSize	number	—	Maximum file size in bytes.
mode	"input" | "dropzone"	'input'	Display mode: inline input or drag-and-drop dropzone.
placeholder	string	—	Placeholder text shown when no file is selected.
ref	Ref<HTMLInputElement>	—	Ref forwarded to the hidden file input element.
size	"sm" | "md" | "lg"	'md'	Visual size of the input.
status	InputStatus	—	Validation status displayed below the input.
style	CSSProperties	—	Inline styles applied to the root element.
isOptional*	true	—
isRequired	false	—

When isMultiple: false, isOptional: false, isRequired: true

Prop	Type	Default	Description
isMultiple	false	—	Whether multiple files can be selected.
maxFiles	undefined	—	Maximum number of files allowed. Only applicable when isMultiple is true.
onChange*	(file: File | null) => void	—	Called when the selected file changes.
value*	File | null	—	Currently selected file.
accept	string	—	Comma-separated MIME types or file extensions the input accepts.
className	string	—	Additional CSS class names applied to the root element.
data-testid	string	—	Test ID applied to the hidden file input.
description	ReactNode	—	Supporting text rendered below the label.
isDisabled	boolean	false	Whether the input is disabled.
isLabelHidden	boolean	false	Whether to visually hide the label.
isLoading	boolean	false	Whether the input is in a loading state.
label*	string	—	Field label text.
labelIcon	IconComponent	—	Icon shown before the label.
labelTooltip	ReactNode	—	Tooltip content shown next to the label.
maxSize	number	—	Maximum file size in bytes.
mode	"input" | "dropzone"	'input'	Display mode: inline input or drag-and-drop dropzone.
placeholder	string	—	Placeholder text shown when no file is selected.
ref	Ref<HTMLInputElement>	—	Ref forwarded to the hidden file input element.
size	"sm" | "md" | "lg"	'md'	Visual size of the input.
status	InputStatus	—	Validation status displayed below the input.
style	CSSProperties	—	Inline styles applied to the root element.
isOptional	false	—
isRequired*	true	—