FileUpload

Drop files or use the browse button. Accepted files appear as removable rows.

import { FileUpload } from '@manti-ui/react';

export default function FileUploadBasic() {
  return (
    <div className="w-full max-w-[calc(var(--manti-space-16)*6)]">
      <FileUpload label="Attachments" variant="primary" maxFiles={5} />
    </div>
  );
}

Restrictions

Use accept, maxFiles, and maxFileSize to validate selection.

Photos

Drag files here or browse

API

Prop	Type	Default	Description
`label`	`ReactNode`	—	Optional label.
`hint`	`ReactNode`	`'Drag files here or browse'`	Dropzone hint text.
`triggerLabel`	`ReactNode`	`'Browse files'`	Browse-button label.
`variant`	`MantiVariant`	`'primary'`	Accent variant.
`accept`	`string \| string[]`	—	Accepted MIME types / extensions.
`maxFiles`	`number`	—	Maximum number of files.
`maxFileSize`	`number`	—	Maximum size per file, in bytes.
`onFilesChange`	`(files: File[]) => void`	—	Called whenever the accepted file list changes.
`disabled`	`boolean`	—	Disable the dropzone.
`name`	`string`	—	Form field name.

Styling

Anatomy

Part	Selector	Description
`root`	`[data-scope="file-upload"][data-part="root"]`	The wrapper; carries data-variant.
`label`	`[data-scope="file-upload"][data-part="label"]`	The label.
`dropzone`	`[data-scope="file-upload"][data-part="dropzone"]`	The drag-and-drop target.
`trigger`	`[data-scope="file-upload"][data-part="trigger"]`	The browse button that opens the file picker.
`item-group`	`[data-scope="file-upload"][data-part="item-group"]`	The list of accepted files.
`item`	`[data-scope="file-upload"][data-part="item"]`	A single accepted file row.
`item-name`	`[data-scope="file-upload"][data-part="item-name"]`	The file name.
`item-size-text`	`[data-scope="file-upload"][data-part="item-size-text"]`	The formatted file size.
`item-delete-trigger`	`[data-scope="file-upload"][data-part="item-delete-trigger"]`	Removes a file from the list.

Tokens

Token	Controls
`--manti-file-upload-gap`	gap
`--manti-file-upload-label-font-size`	label font size
`--manti-file-upload-dropzone-gap`	dropzone gap
`--manti-file-upload-dropzone-padding`	dropzone padding
`--manti-file-upload-dropzone-radius`	dropzone radius
`--manti-file-upload-dropzone-font-size`	dropzone font size
`--manti-file-upload-trigger-height`	trigger height
`--manti-file-upload-trigger-padding-x`	trigger padding x
`--manti-file-upload-trigger-radius`	trigger radius
`--manti-file-upload-trigger-font-size`	trigger font size
`--manti-file-upload-item-gap`	item gap
`--manti-file-upload-item-group-gap`	item group gap
`--manti-file-upload-item-padding-x`	item padding x
`--manti-file-upload-item-padding-y`	item padding y
`--manti-file-upload-item-radius`	item radius
`--manti-file-upload-item-font-size`	item font size
`--manti-file-upload-item-size-font-size`	item size font size
`--manti-file-upload-delete-trigger-size`	delete trigger size
`--manti-file-upload-delete-trigger-radius`	delete trigger radius

Last updated 13 September 2026