FileInput

<FileInput> renders an <input type="file"> element which includes all of Formula’s required handlers.

Unlike the other built-in controls, it doesn’t bind a value because that’s not possible with file inputs in JavaScript. Instead, it uses useEffect to keep the value in-sync.

Sample usage

const form = useForm({
    initialValues: {
        file: null as FileList | null
    }
});
return (
    <form onSubmit={form.submit}>
        <FileInput field={form("file")} />
    </form>
)

Type

function FileInput(props: {
    // The field to associate with this file input
    field: FormField<FileList | null>
} & Omit<DefaultInputProps, "type">)

Native props

<FileInput> supports all props of the native <input>, except for type which is hardcoded to file.