Skip to content
v0.2.10

UploadList

A named native list of host-controlled upload rows.

Preview
  • Brand guidelines.pdfPDF2.4 MB
    Uploading · 45%
    Uploading: Brand guidelines.pdf
  • Logo.svgSVG18.4 kB
    Uploaded
  • Cover.pngPNG850 kB
    Connection interrupted. Try again.

Use UploadList

UploadList is a named export of @flood-md/react. Connect the package once, then import what you use.

First time here? Connect Flood
Example import style
upload-list.tsxTSX
"use client";

import { FloodRoot, UploadList, UploadItem } from "@flood-md/react";
import "@flood-md/react/styles.css";

export function Example() {
  return (
    <FloodRoot>
      <UploadList label="Uploads">
        <UploadItem name="Brand guidelines.pdf" state="uploading" progress={45} />
        <UploadItem name="Logo.svg" state="success" />
        <UploadItem name="Cover.png" state="error" error="Connection interrupted" />
      </UploadList>
    </FloodRoot>
  );
}

Design notes

  • Each row has its own state and stable host identity.
  • Cancellation, retry and removal callbacks are intents for the application.

API reference

PropValuesDefault
density"compact" | "comfortable"—
dividersboolean—
labelstringRequired
Native HTML propsOmit<HTMLAttributes<HTMLUListElement>, "role">Forwarded
View TypeScript source