# FileInput

A native file picker with a compact selection summary and one clear action.

Connect Flood once using [the installation guide](https://flood.md/docs/installation). Then import the components you use; no per-component add command is needed.

## Example

```tsx
"use client";

import { FloodRoot, Field, FileInput } from "@flood-md/react";
import "@flood-md/react/styles.css";

export function Example() {
  return (
    <FloodRoot>
      <Field label="Attachments" hint="Choose files from your device.">
        {control => <FileInput {...control} name="attachments" multiple />}
      </Field>
    </FloodRoot>
  );
}
```

## Design notes

- The browser owns FileList, native name/form/required/accept/multiple/capture behavior and the input ref. onChange retains the native event; onFilesChange receives a fresh array after selection or clear. No controlled value/defaultValue or readOnly mode is supplied.
- clearable defaults to true. Localize placeholder and clearLabel. Clear restores input focus and empties the native selection; form reset clears the summary without emitting a change. Disabled includes inherited fieldset behavior. Cancelling the chooser preserves selection.
- File names are shown as text, shortened visually when needed. This component only selects files; the host owns upload, progress and validation. accept is a chooser hint, not file validation. Available in 0.2.5.
- Multiple selection shows a compact count and a collapsible list with full file names and localized sizes. Removing one file updates the native FileList and preserves keyboard focus; clearable=false hides both individual and global removal. Translate selectionLabel/removeFileLabel. In multiple mode, choosing again appends files. Repeated files are deduplicated by name, size, type, lastModified and relative path. Single mode replaces its selection.

## API reference

| Prop | Values | Default |
| --- | --- | --- |
| `status` | `"error" \| "warning" \| "success" \| "info"` | `—` |
| `invalid` | `boolean` | `—` |
| `controlSize` | `"sm" \| "md" \| "lg" \| "xl"` | `"md"` |
| `clearable` | `boolean` | `true` |
| `clearLabel` | `string` | `"Clear files"` |
| `selectionLabel` | `string` | `—` |
| `removeFileLabel` | `string` | `—` |
| `onFilesChange` | `(files: readonly File[]) => void` | `—` |
| `Native HTML props` | `Omit<InputHTMLAttributes<HTMLInputElement>, "type" \| "value" \| "defaultValue" \| "children" \| "readOnly">` | `Forwarded` |