# File input (UI SDK): Form

> With a `name`, the files submit through a native file input, even before the page hydrates. Rejected files never submit, and a form reset empties the list.

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

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-form.json
```

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

## Source

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

import * as React from "react"

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

function UiSdkFileInputForm() {
  const [submitted, setSubmitted] = React.useState<string[] | null>(null)

  return (
    <form
      className="flex w-full max-w-md flex-col gap-3"
      onSubmit={(event) => {
        event.preventDefault()
        const data = new FormData(event.currentTarget)
        setSubmitted(
          data
            .getAll("attachments")
            .flatMap((entry) =>
              entry instanceof File && entry.name ? [entry.name] : []
            )
        )
      }}
      onReset={() => setSubmitted(null)}
    >
      <FileInput name="attachments" multiple maxSize={10_000_000}>
        <FileInputDropzone className="min-h-32">
          <FileInputDropzoneTitle>Attach files</FileInputDropzoneTitle>
          <FileInputDropzoneDescription>
            Up to 10 MB each.
          </FileInputDropzoneDescription>
          <FileInputTrigger className="mt-3">Browse files</FileInputTrigger>
        </FileInputDropzone>
        <FileInputRejections />
        <FileInputList aria-label="Attachments">
          <FileInputItem />
        </FileInputList>
      </FileInput>
      <div className="flex items-center gap-3">
        <Button type="submit" size="sm">
          Submit
        </Button>
        <Button type="reset" size="sm" variant="ghost">
          Reset
        </Button>
      </div>
      <p className="m-0 text-sm text-muted-foreground">
        {submitted === null
          ? "Nothing submitted yet."
          : submitted.length
            ? `Submitted ${submitted.join(", ")}`
            : "Submitted with no files."}
      </p>
    </form>
  )
}

export { UiSdkFileInputForm }
```

## Props in this example

### FileInput

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

## 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)
- [Prompt attachments](https://hextaui.com/docs/ui-sdk-file-input/examples/attachments)
- [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)
- [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)