# File input (UI SDK): Invalid

> `invalid` marks the drop zone and the trigger, and the trigger tells screen readers. Point the trigger’s `aria-describedby` at your message.

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

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

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

## Source

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

import * as React from "react"

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

function UiSdkFileInputInvalid() {
  const [invalid, setInvalid] = React.useState(false)
  const errorId = React.useId()

  return (
    <form
      noValidate
      className="flex w-full max-w-md flex-col gap-3"
      onSubmit={(event) => {
        event.preventDefault()
        const data = new FormData(event.currentTarget)
        const proof = data.get("proof")
        setInvalid(!(proof instanceof File && proof.name))
      }}
    >
      <FileInput
        name="proof"
        accept={["image/*", ".pdf"]}
        invalid={invalid}
        onValueChange={(value) => {
          if (value.length) setInvalid(false)
        }}
      >
        <FileInputDropzone className="min-h-32">
          <FileInputDropzoneTitle>Proof of address</FileInputDropzoneTitle>
          <FileInputDropzoneDescription>
            A utility bill or bank statement from the last 3 months.
          </FileInputDropzoneDescription>
          <FileInputTrigger
            className="mt-3"
            aria-describedby={invalid ? errorId : undefined}
          >
            Choose a file
          </FileInputTrigger>
        </FileInputDropzone>
        {invalid ? (
          <p id={errorId} className="m-0 text-sm text-destructive">
            Add a scan to continue.
          </p>
        ) : null}
        <FileInputList aria-label="Proof of address">
          <FileInputItem />
        </FileInputList>
      </FileInput>
      <Button type="submit" size="sm" className="self-start">
        Continue
      </Button>
    </form>
  )
}

export { UiSdkFileInputInvalid }
```

## Props in this example

### FileInput

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `onValueChange` | `(value: File[], details) => void` | – | details has the reason and the added, removed and rejected files. |
| `accept` | `string \| string[]` | – |  |
| `invalid` | `boolean` | `false` |  |
| `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)
- [Form](https://hextaui.com/docs/ui-sdk-file-input/examples/form)
- [Disabled](https://hextaui.com/docs/ui-sdk-file-input/examples/disabled)
- [Right to left](https://hextaui.com/docs/ui-sdk-file-input/examples/rtl)