File Item

Preview

index.tsx

example1.png200.00 B

example2.png300.00 B

example3.png400.00 B

example4.png500.00 B

example5.png500.00 B

Preview

index.tsx

Choose file0.00 B

Preview

index.tsx

Choose file0.00 B

Design Tokens for FileItem

Token	Color for	State/Meaning
--par-color-bg-fileitem-enabled	FileItem background	Enabled/Default
--par-color-bg-fileitem-failed	FileItem background	Failed/Error

FileItem also inherits design tokens from the Input and Progress components. For a full list of available tokens, refer to the Input and Progress documentation.

FileItem API Reference

`<FileItem />`

Prop	Type	Default	Description
fileName	string	"Choose file"	The name of the file to display.
fileSize	number	0	The size of the file in bytes.
status	'error' \| 'success' \| 'completed'	'completed'	The status of the file item.
loading	number	0	Loading progress percentage (0-100).
disabled	boolean	false	Whether the file item is disabled.
onRetry	() => void		Callback when the retry action is performed (on error).
onRemove	() => void		Callback when the remove action is performed.
...divProps	HTMLDivElement props		All native div props (className, style, ...)

Note: FileItem inherits all native props from HTMLDivElement.