# File input (UI SDK): Prompt attachments

> With `variant="composer"`, the drop zone is the card around a message box, and `layout="chips"` lists files as compact chips. `pasteTarget` takes pasted screenshots from the text area, while pasted text stays text.

Canonical: https://hextaui.com/docs/ui-sdk-file-input/examples/attachments

Component docs: https://hextaui.com/docs/ui-sdk-file-input

## Add this example

```bash
npx shadcn@latest add https://hextaui.com/r/ui-sdk-file-input-attachments.json
```

This adds `components/examples/ui-sdk-file-input/attachments.tsx` with the File input component and the HextaUI theme tokens.

## Source

```tsx title="components/examples/ui-sdk-file-input/attachments.tsx"
"use client"

import * as React from "react"
import { IconArrowUp, IconPaperclip } from "@tabler/icons-react"

import { Button } from "@/components/ui/button"
import {
  FileInput,
  FileInputDropzone,
  FileInputItem,
  FileInputList,
  FileInputRejections,
  FileInputTrigger,
} from "@/components/ui/ui-sdk-file-input"

function UiSdkFileInputAttachments() {
  const message = React.useRef<HTMLTextAreaElement>(null)

  return (
    <FileInput multiple maxFiles={4} maxSize={20_000_000} className="max-w-lg">
      <FileInputDropzone
        variant="composer"
        pasteTarget={() => message.current}
      >
        <FileInputList aria-label="Attachments" layout="chips">
          <FileInputItem />
        </FileInputList>
        <textarea
          ref={message}
          aria-label="Message"
          placeholder="Ask anything, or paste a screenshot"
          rows={2}
          className="field-sizing-content max-h-40 min-h-12 w-full resize-none bg-transparent px-2 py-1.5 text-sm outline-none placeholder:text-muted-foreground pointer-coarse:text-touch"
        />
        <div className="flex items-center justify-between">
          <FileInputTrigger
            variant="ghost"
            size="icon-sm"
            aria-label="Attach files"
          >
            <IconPaperclip aria-hidden="true" />
          </FileInputTrigger>
          <Button type="button" size="icon-sm" shape="pill" aria-label="Send">
            <IconArrowUp aria-hidden="true" />
          </Button>
        </div>
      </FileInputDropzone>
      <FileInputRejections />
    </FileInput>
  )
}

export { UiSdkFileInputAttachments }
```

## Props in this example

### FileInput

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `multiple` | `boolean` | `false` |  |
| `maxFiles` | `number` | – |  |
| `maxSize` | `number` | – | In bytes. |

### FileInputDropzone

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `variant` | `"default" \| "composer" \| "overlay"` | `"default"` | A dashed zone, a card that wraps a message composer, or a full-page overlay shown while dragging. |
| `pasteTarget` | `"document" \| string \| Element \| () => Element` | – | Somewhere else to take pasted files from. |

### FileInputTrigger

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `variant` | `Button variant` | `"outline"` |  |
| `size` | `Button size` | `"sm"` |  |

### FileInputList

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `layout` | `"list" \| "grid" \| "chips"` | `"list"` | Rows, square image tiles, or compact chips. Items take their look from it. |

## More File input examples

- [Accepted types and limits](https://hextaui.com/docs/ui-sdk-file-input/examples/limits)
- [Image previews](https://hextaui.com/docs/ui-sdk-file-input/examples/images)
- [Upload button](https://hextaui.com/docs/ui-sdk-file-input/examples/button)
- [Page-wide drop](https://hextaui.com/docs/ui-sdk-file-input/examples/page-drop)
- [Folders](https://hextaui.com/docs/ui-sdk-file-input/examples/folders)
- [Controlled](https://hextaui.com/docs/ui-sdk-file-input/examples/controlled)
- [Form](https://hextaui.com/docs/ui-sdk-file-input/examples/form)
- [Invalid](https://hextaui.com/docs/ui-sdk-file-input/examples/invalid)
- [Disabled](https://hextaui.com/docs/ui-sdk-file-input/examples/disabled)
- [Right to left](https://hextaui.com/docs/ui-sdk-file-input/examples/rtl)