AttachmentChips
The files attached to a message or a comment, with size, upload state and a remove button. Without onRemove it is a read-only list.
- AttachmentChips
PreviewLink to the section Preview
Live in all three themes. Everything here is interactive.
Light theme, AttachmentChips
Attached files
screenshot-2026-11-08.png420 KB
a-very-long-file-name-for-the-quarterly-error-report-with-details.pdf1.2 MB
trace.zipUploading
video.movToo large
notes.md2 KB
Dark theme, AttachmentChips
Attached files
screenshot-2026-11-08.png420 KB
a-very-long-file-name-for-the-quarterly-error-report-with-details.pdf1.2 MB
trace.zipUploading
video.movToo large
notes.md2 KB
High contrast theme, AttachmentChips
Attached files
screenshot-2026-11-08.png420 KB
a-very-long-file-name-for-the-quarterly-error-report-with-details.pdf1.2 MB
trace.zipUploading
video.movToo large
notes.md2 KB
UsageLink to the section Usage
import { AttachmentChips } from '@skribly/ui/conversation'<AttachmentChips
label="Attached files"
items={files}
onRemove={(ids) => remove(ids)}
removeLabel="Remove"
/>Every label is a prop, so the app passes its own words in its own language. See no built-in text.
AccessibilityLink to the section Accessibility
- A tag group: Tab enters it, arrow keys move between files, and Delete or Backspace removes one.
- Each remove button is named by its verb and the file, such as "Remove notes.md, 2 KB".
- Long names are cut on screen and read in full.
- Upload and error states have an icon and a word.
This demo runs through axe in all three themes on every test run. See what the tests check.