# Attachments

Render file attachments as tiles, chips, or rows — one element, presentation chosen by attribute.

<p class="kai-tag-sub">kai-attachments</p>

Render a set of file attachments — one element, three presentations chosen by a single attribute. Tiles for a gallery, chips for inline, rows for a list.

## Preview

> **tip:** 
Show files a user attached (or the assistant produced) **anywhere in a chat** — the composer, a message body, a sources rail. Set `variant` to fit the space: `grid` for a gallery, `inline` for a compact chip row, `list` for a detailed column.

## Usage

Set `items` in JavaScript (arrays can't be HTML attributes); choose the presentation with the `variant`, `hover-card`, and `removable` attributes; listen for `kai-remove`.

## Examples

### Grid

`variant="grid"` — square image tiles for a gallery.

### Inline

`variant="inline"` — a compact icon + label chip per file, for a composer or message body.

### List

`variant="list"` — full-width rows with a preview thumbnail, filename and media type.

### Removable

Add `removable` for a per-item remove button (the **×**); it fires the `kai-remove` event.

### Hover preview

Add `hover-card` to reveal each item's details on hover — useful on `grid`, where the tile shows only the image.

## Props

## Events

## Composed from