All components (204)

File list

Data · FileList · .amset-files

What it is and when to use it

The attachments of something (an order, an invoice, a ticket): each file with its type written out, its size, when it was uploaded, and the download and remove buttons. What is being uploaded carries its bar; what failed, the reason and a retry button.

When to use it

Below a FileUpload, for what has already been uploaded or is being uploaded.
On the page of an order or a customer, for their documents.
url on a file to be able to download it; progress (from 0 to 100) while it uploads; error with the reason if it failed.
onRemove receives the key and it is up to whoever uses it to take the file out of files; onRetry, the same for uploading it again. With no files, the empty text appears.

When not to

To choose or drop the files: FileUpload.
For a gallery of photos that are looked at: Gallery.

Keyboard: Tab moves through the download links and the retry and remove buttons; Enter presses them. When a file is removed focus moves to the list, it does not fall to the top of the page.

Accessibility: it is a region with a name (label). The type is written on the tag (PDF, XLSX), not left to a colored icon. Each button says which file it is for ("Remove factura-F-2026-0042.pdf", "Download …"): ten "Remove" in a row do not say which is which. On removing, how many remain is announced ("albaran-proveedor.xlsx removed. 3 files left"). The upload carries a named progress bar and the state is written out ("Uploading, 45%", "Upload failed: exceeds 20 MB").

Fine-tuning: CSS variables --amset-files-*: -brand-font, -brand-height, -brand-width, -detail, -gap, -name, -padding, -radius. The size moves the padding, the type tag and the font sizes.

What it looks like

contract.pdf180 kB
blueprints.dwg2,0 MB

<FileList
  label="Attachments"
  files={[
    { key: 'f1', name: 'contract.pdf', size: 184320 },
    { key: 'f2', name: 'blueprints.dwg', size: 2097152 },
  ]}
/>

Props

Import it with import { FileList } from '@amset/ui'. Required props are marked.

Prop	Type	What it does
`files`required	`readonly FileListItem[]`	—
`label`required	`string`	What these files are for. Required: it names the list.
`className`	`string`	Merged with the library classes; it does not replace them.
`empty`	`string`	—
`onRemove`	`(key: string) => void`	—
`onRetry`	`(key: string) => void`	—
`size`	`"sm" \| "md" \| "lg"`	—

It also accepts the attributes of the element it renders: className, style, data-*, aria-* and its events.

CSS variables

These CSS variables are how you adapt it. Declare them on the component's selector, not on :root: the stylesheet redeclares them in the rule itself, and a declaration on the same element always wins.

Variable	Default
`--amset-files-padding`	`var(--amset-space-3)`
`--amset-files-gap`	`var(--amset-space-3)`
`--amset-files-brand-width`	`2.5rem`
`--amset-files-brand-height`	`2.75rem`
`--amset-files-brand-font`	`0.625rem`
`--amset-files-name`	`var(--amset-text-sm)`
`--amset-files-detail`	`var(--amset-text-xs)`
`--amset-files-radius`	`var(--amset-radius)`

How to change it

.amset-files {
  --amset-files-padding: ...;
  --amset-files-gap: ...;
}

In the test bench

Every state and variant, to try one at a time, on its page at ui.amset.tech: