Go to AntUIKit homepage

Attachments

A drop area for files that lists them as cards once they are added, for attaching files to a chat message.

Preview in FigmaLLMs

Accessibility

What Attachments does for you, and what it leaves to the page around it.

The empty area

While the list is empty, the drop area is a focusable element with role="button". Tab reaches it and Enter opens the file picker. Space does not.
  • Its name is its text: the title and description of your placeholder, read together. Write the title as the action, like “Drop files here or choose them”, so the button says what it does.
  • Dragging is never the only way in. The picker does the same job, so a reader who cannot drag loses nothing.
  • Under disabled the whole area is hidden from screen readers, not announced as disabled. If the reason matters, say it in text next to the component.

The add and remove buttons

Once there are files, the controls around the cards need work from you.
  • The add button is a real <button>, so it takes focus and Enter or Space. It shows only a glyph and has no name, and no prop gives it one. Put a labeled button of your own next to the list, like “Add files”, that calls ref.current.select().
  • The remove control on each card is not a button. It takes no focus and has no name, so a keyboard user cannot remove a file. Add your own way to do it, like a “Remove all” button that empties items, or a list of named remove buttons.
  • With overflow="scrollX", the two arrow buttons are focusable and also have no name, so a screen reader announces them as unlabeled buttons.

Upload status

A card shows its state in text as well as color: the progress percent while uploading, and the response message in red when it fails. Nothing is announced when that state changes.
  • Keep a polite live region of your own, a <div role="status">, and write a short line into it from onChange when a file finishes or fails: “chapter-one.pdf failed: too large”.
  • Set response to a reason a person can act on. A card with no message only says “error”.
  • Image thumbnails take the file name as their alt text, so a meaningful name serves both the card and the screen reader.

Contrast

  • The empty area uses a translucent, blurred fill over whatever sits behind it. Check the placeholder text against your real background, not against white.
  • The failed state is a red border and red text. The message carries it for readers who cannot tell the red apart, so always set one.
  • Every color here comes from the active theme, so check a custom seed yourself. The Tokens tab lists which tokens Attachments reads.
ActionsBubble
© 2026 AntUIKit . All rights reserved.