# File input (UI SDK): Controlled

> Pass `value` and `onValueChange`. A controller from `createFileInputController()` opens the picker from any button, and clears or adds files.

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

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

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

## Source

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

import * as React from "react"

import { Button } from "@/components/ui/button"
import {
  FileInput,
  FileInputItem,
  FileInputList,
  createFileInputController,
  formatFileSize,
} from "@/components/ui/ui-sdk-file-input"

function UiSdkFileInputControlled() {
  const [files, setFiles] = React.useState<File[]>([])
  const [picker] = React.useState(createFileInputController)
  const total = files.reduce((sum, file) => sum + file.size, 0)

  return (
    <div className="flex w-full max-w-md flex-col gap-3">
      <div className="flex flex-wrap items-center gap-2">
        <Button size="sm" variant="outline" onClick={() => picker.open()}>
          Choose files
        </Button>
        <Button
          size="sm"
          variant="ghost"
          disabled={files.length === 0}
          onClick={() => picker.clear()}
        >
          Clear
        </Button>
        <span className="ms-auto text-sm text-muted-foreground tabular-nums">
          {files.length === 0
            ? "No files"
            : `${files.length} ${files.length === 1 ? "file" : "files"}, ${formatFileSize(total)}`}
        </span>
      </div>
      <FileInput
        multiple
        controller={picker}
        value={files}
        onValueChange={(value) => setFiles(value)}
      >
        <FileInputList aria-label="Chosen files">
          <FileInputItem />
        </FileInputList>
      </FileInput>
    </div>
  )
}

export { UiSdkFileInputControlled }
```

## Props in this example

### FileInput

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `value` | `File[]` | – |  |
| `onValueChange` | `(value: File[], details) => void` | – | details has the reason and the added, removed and rejected files. |
| `multiple` | `boolean` | `false` |  |
| `controller` | `FileInputController` | – | From createFileInputController(). |

## 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)
- [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)