FileInput

react-hook-form-bound single-file upload field. Wraps the @uxf/ui/file-input primitive and manages its value, isInvalid, and helperText from form state.

When to use

Use @uxf/form/file-input for a single-file upload inside a @uxf/form form — it registers the field with react-hook-form via control/name and renders validation errors automatically. For a standalone, manually-controlled file input (outside a form), use the @uxf/ui/file-input twin directly. For multiple files use @uxf/form/dropzone; for an avatar/image preview use @uxf/form/avatar-file-input.

Usage

import { Form } from "@uxf/form/form";
import { FileInput, FileInputValue } from "@uxf/form/file-input";
import { FileResponse } from "@uxf/core/types";
import { useForm } from "react-hook-form";

// your uploader: send the file to storage, resolve with the stored file
declare function uploadFile(file: File): Promise<FileResponse>;

interface FormData {
    attachment: FileInputValue;
}

function Example() {
    const formApi = useForm<FormData>({ defaultValues: { attachment: null } });

    return (
        <Form formApi={formApi} id="example" onSubmit={(values) => console.log(values)}>
            <FileInput control={formApi.control} isClearable label="Attachment" name="attachment" onUploadFile={uploadFile} />
        </Form>
    );
}

Value is FileInputValue = FileResponse | null (FileResponse from @uxf/core/types) — the field stores the uploaded file object returned by onUploadFile, or null when cleared.

Props

FileInputProps<FormData> = ControlProps<FormData> + the visual props of the @uxf/ui/file-input twin (minus the ones this field manages: isFocused, isInvalid, onChange, value) + the field-specific props below.

All other props (label, placeholder, size, variant, helperText, isClearable, accept, maxFileSize, uploadButtonLabel, hiddenLabel, onUploadError, onFocus/onBlur, form, id, className, …) are forwarded to the twin — see @uxf/ui/file-input.

Validation

• isRequired adds a required rule; override its message with requiredMessage.
• Add any further rules via rules; the field-level error is shown as the twin's helperText and sets isInvalid.

Requirements

• Must be rendered inside a Form — it reads the form context (formId, and inherits isDisabled / isReadOnly) and needs a react-hook-form control. The field id defaults to ${formId}__${name}.
• Ships no CSS of its own; it renders @uxf/ui/file-input, so include that component's stylesheet(s) and the @uxf/ui token layer — see @uxf/ui/file-input.

Links

• Visual/primitive twin: @uxf/ui/file-input