FileInput

File picker dropzone with click-to-browse, drag-and-drop, and client-side accept / maxSize / maxFiles validation. Always controlled via value and onChange.

Examples

Default

Pass a required label, controlled value / onChange, and optional accept filters.

import { FileInput } from '@var-ui/react';

<FileInput label="Upload" value={file} onChange={setFile} accept=".pdf,image/*" />

Multiple files

Set multiple so value is a File[] (or null when cleared). Optionally cap the count with maxFiles.

import { FileInput } from '@var-ui/react';
import { useState } from 'react';

const [files, setFiles] = useState<File[] | null>(null);

<FileInput
  label="Attachments"
  value={files}
  onChange={setFiles}
  multiple
  accept="image/*,.pdf"
/>

Props

Accessibility

The dropzone is a focusable role="button" activated with Enter/Space, labelled by the visible field label and described by description / error text. The native file input is visually hidden (aria-hidden) and opened programmatically. The clear control has an explicit aria-label (“Clear …”).