Function: FileField()

FileField<TFieldValues>(props): Element

A file input field component that integrates React Hook Form with HeroUI Input.

This component provides a type-safe file upload field with validation support, error handling, and accessibility features. The field value is a FileList or null.

Type Parameters

TFieldValues

TFieldValues extends FieldValues

The form data type

Parameters

props

FileFieldProps<TFieldValues>

The file field props

Returns

Element

The rendered file field component

Examples


import { ZodForm, FormFieldHelpers } from "@rachelallyson/hero-hook-form";
import { z } from "zod";
 
const schema = z.object({
  avatar: z.instanceof(FileList).nullable(),
  documents: z.instanceof(FileList).optional(),
});
 
function MyForm() {
  return (
    <ZodForm
      config={{
        schema,
        fields: [
          FormFieldHelpers.file("avatar", "Upload Avatar", { accept: "image/*" }),
          FormFieldHelpers.file("documents", "Upload Documents", {
            multiple: true,
            accept: ".pdf,.doc,.docx",
          }),
        ],
      }}
      onSubmit={(data) => console.log(data)}
    />
  );
}


// With file size validation
<FileField
  control={form.control}
  name="avatar"
  label="Upload Avatar"
  accept="image/*"
  transform={(files) => {
    if (files && files[0] && files[0].size > 5 * 1024 * 1024) {
      // File too large
      return null;
    }
    return files;
  }}
/>