Source: https://app-studio-6167b.web.app/docs/AttachmentGroup

@app-studio/components

# AttachmentGroup

The `AttachmentGroup` component displays a list of file attachments, typically used in chat interfaces or upload previews. It supports displaying thumbnails for images and videos, and generic icons for other file types. It also provides a mechanism to remove attachments.

[View component source](https://github.com/rize-network/app-studio-components/blob/main/src/components/AttachmentGroup/AttachmentGroup/AttachmentGroup.tsx)

## Import

```ts
import { AttachmentGroup } from '@app-studio/components';
```

New to the library? Complete [installation and provider setup](https://app-studio-6167b.web.app/docs/installation) first.

## Interactive examples

Try the component, then open Code to copy the complete example.

```jsx
import React, { useState } from 'react';
import { AttachmentGroup } from '@app-studio/components';
import { Button } from '@app-studio/components';
import { Vertical } from 'app-studio';

export function AttachmentGroupExample() {
  const [files, setFiles] = useState<File[]>([]);
  return (
    <Vertical gap={16}>
      <Button
        variant="outline"
        onClick={() =>
          setFiles([
            new File(['Sample report'], 'report.txt', { type: 'text/plain' }),
          ])
        }
      >
        Add sample attachment
      </Button>
      <AttachmentGroup
        files={files}
        onRemove={(index) => setFiles(files.filter((_, i) => i !== index))}
      />
    </Vertical>
  );
}
```

## Props

Required props are marked below. A dash indicates an unspecified default. Design system configuration can override implementation defaults.

**AttachmentGroup**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `files` Required | `File[]` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/AttachmentGroup/AttachmentGroup/AttachmentGroup.tsx#L31) |
| `sandboxId` | `string` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/AttachmentGroup/AttachmentGroup/AttachmentGroup.tsx#L32) |
| `onRemove` Required | `(index: number) => void` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/AttachmentGroup/AttachmentGroup/AttachmentGroup.tsx#L33) |
| `layout` | `"grid" \| "inline"` `"grid"``"inline"` | `'inline'` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/AttachmentGroup/AttachmentGroup/AttachmentGroup.tsx#L34) |
| `maxHeight` | `string` | `'120px'` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/AttachmentGroup/AttachmentGroup/AttachmentGroup.tsx#L35) |
| `showPreviews` | `boolean` | `false` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/AttachmentGroup/AttachmentGroup/AttachmentGroup.tsx#L36) |
| `views` | `{ container?: any; item?: any; name?: any; size?: any; removeButton?: any; }` | `{}` | Style overrides for the named internal parts.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/AttachmentGroup/AttachmentGroup/AttachmentGroup.tsx#L37) |

For shared layout, color, and responsive properties, read [Styling & composition](https://app-studio-6167b.web.app/docs/styling) and [Responsive layouts](https://app-studio-6167b.web.app/docs/responsive). Additional native element attributes depend on the target platform.

## Usage guidance

- Give controls a visible label or an accessible name, and verify keyboard interaction. See [Accessibility](https://app-studio-6167b.web.app/docs/accessibility).
- For controlled inputs, update the value from the callback shown in the props table. Keep application state in your component or form library.
- These previews run in the browser. Check [React Native setup](https://app-studio-6167b.web.app/docs/react-native) for platform requirements and differences.