FileUpload

The FileUpload component allows users to upload files with validation options such as size, type, and progress feedback.

Usage & Examples

Default

default.tsx
<FileUpload label="Upload your document" onSubmit={...}/>

Visual variants

Themes

primary
secondary
tertiary
quaternary

States

success
warning
error
info

Variants

solid
outline
glass
visual-variants.tsx
// Themes
<FileUpload theme="primary" label="Upload your document" onSubmit={...}/>
<FileUpload theme="secondary" label="Upload your document" onSubmit={...}/>
<FileUpload theme="tertiary" label="Upload your document" onSubmit={...}/>
<FileUpload theme="quaternary" label="Upload your document" onSubmit={...}/>

// States
<FileUpload state="success" label="Upload your document" onSubmit={...}/>
<FileUpload state="warning" label="Upload your document" onSubmit={...}/>
<FileUpload state="error" label="Upload your document" onSubmit={...}/>
<FileUpload state="info" label="Upload your document" onSubmit={...}/>

// Variants
<FileUpload variant="solid" label="Upload your document" onSubmit={...}/>
<FileUpload variant="outline" label="Upload your document" onSubmit={...}/>
<FileUpload variant="glass" label="Upload your document" onSubmit={...}/>

Interaction states

Disabled
interaction-states.tsx
// Disabled
<FileUpload disabled label="Upload your document" onSubmit={...}/>

Props API

56 props
Columns
FileUpload props API
Default
Description
allowedFileTypesstring[]Noprops[]Allowed file MIME types or file extensions (e.g. ".pdf", "image/png").
controlRoundingRoundingTypeNopropsconfigured default rounding (fallback: "medium")Rounding of the control button ('none' | 'small' | 'medium' | 'large' | 'full').
controlShadowShadowTypeNoprops—Shadow of the control button ('none' | 'light' | 'medium' | 'strong' | 'intense').
data-testidstringNotesting—Backward-compatible alias for test ID attributes.
descriptionClassNamestringNoprops—Additional class names for the FormGroup description.
disabledbooleanNopropsfalseWhether to disable the file input.
dropzoneClassNamestringNoprops—Additional class names for the dropzone/root wrapper.
dropzoneDescriptionstringNoprops—Optional custom instructions for drag-and-drop users and assistive tech.
dropzoneRole"button" | "group" | "region"Noprops"group"Whether the dropzone should expose a button-like role.
enableDragAndDropbooleanNopropstrueWhether drag and drop is enabled.
errorMessagestringNoprops—Optional error message.
errorMessageClassNamestringNoprops—Additional class names for the FormGroup error message.