FileInput

Molecule

Drag-and-drop file upload with validation, file list, and individual remove actions.

Preview

Profile photo

Drag & drop files here, or

PNG or JPG, max 2 MB

Code

<FileInput id="photo" label="Profile photo" hint="PNG or JPG, max 2 MB"
  accept="image/*" maxSizeBytes={2097152} />

Preview

Attachments

Drag & drop files here, or

Up to 5 MB each

Code

<FileInput id="attachments" label="Attachments" multiple hint="Up to 5 MB each" maxSizeBytes={5242880} />

Preview

Project attachments

Drag & drop files here, or

Up to 5 MB each

Code

<FileInput id="attachments" label="Project attachments" multiple maxSizeBytes={5242880}
  onUpload={uploadFiles} uploadLabel="Upload" />

Preview

Disabled upload

Drag & drop files here, or

Code

<FileInput id="upload" label="Disabled upload" disabled />

Navigation