> For the complete documentation index, see [llms.txt](https://docs.realmacsoftware.com/elements-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.realmacsoftware.com/elements-docs/using-elements/components/form/attachment.md).

# Attachment

Attachment adds a drag-and-drop file field to a Form. It can accept one or several files, restrict file categories, enforce a per-file size limit, and show removable previews.

### How to Use Attachment

You’ll find Attachment under **Forms** in the Components list.

1. Place Attachment inside a [Form](/elements-docs/using-elements/components/form.md).
2. Enter a short, unique Name.
3. Choose whether it accepts Multiple files.
4. Select the accepted file category and maximum size.
5. Edit the drop-zone and button text on the canvas.
6. Publish and test with files that should pass and fail.

### Component Settings

#### Settings

**Required** is off by default.

{% hint style="warning" %}
In the current release, Attachment’s Required setting is not applied to the published file input. Do not rely on it to prevent an empty submission.
{% endhint %}

**Name** identifies the uploaded field. It is blank by default. Use letters, numbers, hyphens, or underscores.

**Multiple** is off by default. Enable it to accept more than one file.

**Accept** is not responsive and defaults to All File Types. Options are:

* All File Types
* Images
* Videos
* Audio
* Documents
* Zip

Documents include common PDF, Word, Excel, and PowerPoint formats. Zip includes ZIP and 7z-compatible archive types.

**Max File Size** is measured in megabytes per file and defaults to 2.

{% hint style="warning" %}
Webhook submissions send only the first attached file. Multiple attachments are supported with Email delivery.
{% endhint %}

#### Content Layout

**Alignment** offers Start, Centre, or End and defaults to Centre.

**Gap** defaults to theme spacing 4.

**Button Color** defaults to Brand 500.

#### File Previews

**Preview in Edit → Enabled** is on by default and shows a sample preview while designing.

Preview styling defaults:

* **Thumbnail** — Theme spacing 10.
* **Background** — Surface 50.
* **Close** — Red 500.
* **Border Color** — Surface 50.

Set Border Width and Radius using their Theme Studio controls.

### Accessibility

Keep the Select Files text descriptive, state accepted formats and maximum size near the field, and do not communicate upload errors through colour alone.

### Troubleshooting

#### A file is rejected

Check Accept and Max File Size. The browser supplies the file’s MIME type, which must match the selected category.

#### Only one file is retained

Enable Multiple and use Email delivery when every selected file must be sent.

### Related Components

* [Form](/elements-docs/using-elements/components/form.md) — Configures delivery and validation.
* [Error](/elements-docs/using-elements/components/form/error.md) — Displays form-level failure feedback.
* [Submit](/elements-docs/using-elements/components/form/submit.md) — Provides the clickable submission control.

| Common Control                                                                                                     | Description                                                             |
| ------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------- |
| [Link](/elements-docs/using-elements/components/common-controls/link.md)                                           | Link to a page, resource, anchor, email address, or website.            |
| [Layout](/elements-docs/using-elements/components/common-controls/layout.md)                                       | Control positioning, stacking, visibility, overflow, and isolation.     |
| [Sizing](/elements-docs/using-elements/components/common-controls/sizing.md)                                       | Set width, height, and responsive size constraints.                     |
| [Spacing](/elements-docs/using-elements/components/common-controls/spacing.md)                                     | Add responsive margin and padding.                                      |
| [Typography & Text Styles](/elements-docs/using-elements/components/common-controls/typography-and-text-styles.md) | Control fonts, text spacing, decoration, colour, and semantic wrappers. |
| [Backgrounds](/elements-docs/using-elements/components/common-controls/backgrounds.md)                             | Apply colour, image, gradient, SVG, video, and hover backgrounds.       |
| [Transitions](/elements-docs/using-elements/components/common-controls/transitions.md)                             | Choose what animates and set its timing curve, duration, and delay.     |
| [Effects](/elements-docs/using-elements/components/common-controls/effects.md)                                     | Apply shadows, opacity, and hover effects.                              |
| [Filters](/elements-docs/using-elements/components/common-controls/filters.md)                                     | Apply blur, brightness, saturation, shadow, and backdrop effects.       |
| [Transforms](/elements-docs/using-elements/components/common-controls/transforms.md)                               | Scale, rotate, move, and skew components.                               |
| [Borders](/elements-docs/using-elements/components/common-controls/borders.md)                                     | Set border style, colour, opacity, width, radius, and hover states.     |
| [Advanced](/elements-docs/using-elements/components/common-controls/advanced.md)                                   | Add CSS classes and IDs, or change supported HTML tags.                 |


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.realmacsoftware.com/elements-docs/using-elements/components/form/attachment.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.