File Item

A file in an upload list: icon, name, size or status, an optional progress bar while uploading, and a remove button.

import { FileItem } from '@basiiik/ui';

The snippet an agent gets

From get_component_snippet, with the required props filled in from the spec. Every snippet is type-checked against the library before it is shipped.

import { FileItem } from '@basiiik/ui';

<FileItem name="report.pdf" />

Example values were filled in for the required prop name: replace them with your own.
status is uploading, complete or error; progress (0 to 100) drives the native progress bar.
Compose with: icon-button.
Storybook: Inputs/File Upload.

Props

Prop	Type	Notes
`name` required	`string`
`status`	`"error" \| "complete" \| "uploading"`	Default "complete"

Other props

Prop	Type	What it does
`progress`	`number`	0 to 100 while uploading. Omit for an indeterminate bar.
`size`	`string`	Shown when complete, for example "2.4 MB".
`errorMessage`	`string`	Shown when the upload failed.
`meta`	`ReactNode`	Replaces the generated status line.
`onRemove`	`() => void`
`removeLabel`	`string`
`icon`	`ReactNode`

States. status is uploading, complete or error; progress (0 to 100) drives the native progress bar.

Native attributes such as className, id and data-* are forwarded to the root element.

Parts

`FileList`

The list that holds FileItems for an upload queue. Name it with an aria-label.

<FileList aria-label="Uploads"><FileItem name="report.pdf" /></FileList>

Use it when

A file the user has chosen or is uploading, below a File Upload

Do not use it when

A list of stored documents with actions (use List Item)

Rules for agents

List File Items below a File Upload, inside a <ul>, one per chosen file
Set status from the real upload: "uploading" with progress (0 to 100, or omitted for indeterminate), "complete" with size, "error" with errorMessage
Pass onRemove so people can remove a file or cancel its upload; the button is named "Remove <file name>"
Use meta only to replace the generated status line with something more specific

Avoid

An error status without an errorMessage
A progress bar that does not reflect real upload progress
Using File Item for a library of stored documents (use List Item)

Writing the content

Error messages say what went wrong and what to do: 'Upload failed. Check your connection and try again.'
Show the file name as the user named it

Keyboard

Tab to the Remove button; Enter and Space remove the file

Accessibility

Remove button: aria-label="Remove <file name>"
Progress uses <progress> or role="progressbar" with aria-valuenow and a name
Status text is announced politely; Error text is linked with aria-describedby

Colour tokens it reads

color.bg.brand.defaultcolor.bg.danger.subtlecolor.bg.mutedcolor.bg.subtlecolor.bg.surfacecolor.border.dangercolor.border.subtlecolor.icon.primarycolor.text.dangercolor.text.primarycolor.text.secondary

inputs 3 Figma variants Try it in the live demo