FileInput

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

Examples

Default

Upload

Choose file

function SingleFileStory(): React.JSX.Element {
  const [value, setValue] = useState<File | null>(null);
  return <FileInput label="Upload" onChange={setValue} value={value} />;
}

<SingleFileStory />

Dropzone

Upload

Choose files

function DropzoneStory(): React.JSX.Element {
  const [value, setValue] = useState<File[]>([]);
  return (
    <FileInput
      isMultiple
      label="Upload"
      mode="dropzone"
      onChange={setValue}
      value={value}
    />
  );
}

<DropzoneStory />

With Description

UploadPDF, PNG, or JPG up to 10 MB

Choose file

function WithDescriptionStory(): React.JSX.Element {
  const [value, setValue] = useState<File | null>(null);
  return (
    <FileInput
      description="PDF, PNG, or JPG up to 10 MB"
      label="Upload"
      onChange={setValue}
      value={value}
    />
  );
}

<WithDescriptionStory />

Accept Images

UploadPNG or JPG only

Choose file

function AcceptImagesStory(): React.JSX.Element {
  const [value, setValue] = useState<File | null>(null);
  return (
    <FileInput
      accept="image/png, image/jpeg"
      description="PNG or JPG only"
      label="Upload"
      onChange={setValue}
      value={value}
    />
  );
}

<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

function RequiredStory(): React.JSX.Element {
  const [value, setValue] = useState<File | null>(null);
  return (
    <FileInput isRequired label="Upload" onChange={setValue} value={value} />
  );
}

<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={[]}
/>

Read Only

Upload

report.pdf

<FileInput
  isReadOnly
  label="Upload"
  onChange={() => {}}
  value={new File(['report'], 'report.pdf', {type: 'application/pdf'})}
/>

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.
isReadOnly	boolean	false	Whether the selected files are displayed without allowing interaction.
label*	string	—	Field label text.
labelEnd	ReactNode	—	Content shown at the end of the label row, such as a link. It renders outside the label, so it does not focus the control or change its accessible name. It stays visible when isLabelHidden is true.
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.
isReadOnly	boolean	false	Whether the selected files are displayed without allowing interaction.
label*	string	—	Field label text.
labelEnd	ReactNode	—	Content shown at the end of the label row, such as a link. It renders outside the label, so it does not focus the control or change its accessible name. It stays visible when isLabelHidden is true.
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.
isReadOnly	boolean	false	Whether the selected files are displayed without allowing interaction.
label*	string	—	Field label text.
labelEnd	ReactNode	—	Content shown at the end of the label row, such as a link. It renders outside the label, so it does not focus the control or change its accessible name. It stays visible when isLabelHidden is true.
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.
isReadOnly	boolean	false	Whether the selected files are displayed without allowing interaction.
label*	string	—	Field label text.
labelEnd	ReactNode	—	Content shown at the end of the label row, such as a link. It renders outside the label, so it does not focus the control or change its accessible name. It stays visible when isLabelHidden is true.
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.
isReadOnly	boolean	false	Whether the selected files are displayed without allowing interaction.
label*	string	—	Field label text.
labelEnd	ReactNode	—	Content shown at the end of the label row, such as a link. It renders outside the label, so it does not focus the control or change its accessible name. It stays visible when isLabelHidden is true.
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.
isReadOnly	boolean	false	Whether the selected files are displayed without allowing interaction.
label*	string	—	Field label text.
labelEnd	ReactNode	—	Content shown at the end of the label row, such as a link. It renders outside the label, so it does not focus the control or change its accessible name. It stays visible when isLabelHidden is true.
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	—