Docs

React UI

Composer attachments

Add file picker, direct input, dropzone, and controlled attachments to @anvia/react-ui composer surfaces.

Use Composer.Attachments for pending files before submit. It can render the default attachment row or a design-system row with Attachment primitives.

For the full route-boundary flow, including how files become core messages, see Attachments end to end.

Attachment list

import { Attachment, Composer } from "@anvia/react-ui";

export function AttachmentComposer() {
  return (
    <Composer.Root className="composer">
      <Composer.Attachments className="attachment-list">
        {(attachment) => (
          <Attachment.Root className="attachment-row">
            <Attachment.Preview />
            <Attachment.Name />
            <Attachment.Remove>Remove</Attachment.Remove>
          </Attachment.Root>
        )}
      </Composer.Attachments>
      <Composer.AddAttachment accept="image/*,.pdf" multiple>
        Attach
      </Composer.AddAttachment>
      <Composer.Input />
      <Composer.Submit />
    </Composer.Root>
  );
}

Dropzone

Use Composer.AttachmentDropzone when the whole composer or an inner region should accept dropped files. It emits data-dragging while a valid drag is over the zone.

import { Composer } from "@anvia/react-ui";

export function DropzoneComposer() {
  return (
    <Composer.Root className="composer">
      <Composer.AttachmentDropzone className="dropzone">
        <Composer.Attachments className="attachment-list" />
        <Composer.AddAttachment accept="image/*,.pdf" multiple>
          Attach image or PDF
        </Composer.AddAttachment>
        <Composer.Input />
        <Composer.Submit />
      </Composer.AttachmentDropzone>
    </Composer.Root>
  );
}

Direct input trigger

Use Composer.AttachmentInput when an app-owned label or button should trigger the underlying file input.

<label className="file-trigger">
  Upload files
  <Composer.AttachmentInput className="sr-only" accept="image/*,.pdf" multiple />
</label>

Controlled attachments

Use controlled props when pending attachments must be mirrored into local form state, stored before submit, or validated by application code.

const [attachments, setAttachments] = useState<UIAttachment[]>([]);

return (
  <Composer.Root
    className="composer"
    attachments={attachments}
    onAttachmentsChange={setAttachments}
  >
    <Composer.Attachments keepMounted className="attachment-list" />
    <Composer.AttachmentInput multiple />
    <Composer.Input />
    <Composer.Submit />
  </Composer.Root>
);