File Item

A file item represents a single file in a list. It shows the file name, size, status, and contextual actions such as download, delete, cancel, retry, or dismiss.

Overview

The catnip-file-item component renders one row per file. Use it anywhere you need to display files — attached documents, upload progress, download lists, or validation feedback — not only inside a file input.

Common patterns:

• Read-only file list: Show uploaded or attached files with download actions (status="ready").
• Upload flow: Show progress and errors while files are being added (inProgress, warning, danger).
• Future file input: A parent file input can compose multiple file items below its drop zone.

Statuses

Status	Purpose	Actions
ready	File is available	Download, delete
inProgress	Upload is running	Cancel
done	Upload just completed	Download, delete
warning	Non-critical validation issue	Retry, dismiss
danger	Upload or validation failed	Retry, dismiss

Sizes

• m (default): Compact row for dense lists.
• l: Taller row with larger typography and action targets.

Live example

Accessibility

• The root uses role="group" with aria-label set to the file name.
• Action buttons expose descriptive aria-label values. Download and delete labels include the file name for context.
• The bottom progress bar uses role="progressbar" with aria-valuemin, aria-valuemax, and aria-valuenow while uploading or complete.