Remix Validated Form

(name: string, options?: UseFieldOptions) => FieldProps

Accepts the name of the field and returns data about the field and helper functions for the field. This only works if used inside the context of a ValidatedForm.


string | undefined

The validation error message if there is one.

<T extends {}>(props?: T) => T

A prop-getter used to get all the props needed to validated the input. This will automatically set up the validation behavior based on the validationBehavior option. It is recommended to pass all the props you need to pass to the input through this prop-getter.

    type: "text",
    onChange: (event) => console.log(,


The default value of the field, if there is one.

() => void

Clears the error message.

() => void

Validates the form field and populates the error prop if there is an error.


Whether or not the field has been touched. If you're using getInputProps, a field will become touched on blur.

(touched: boolean) => void

Sets the touched state of the field to whatever you pass in.



Allows you to connect to any form on the page, even if the field isn't inside the form.

{ initial?: "onChange" | "onBlur" | "onSubmit"; whenTouched?: "onChange" | "onBlur" | "onSubmit"; whenSubmitted?: "onChange" | "onBlur" | "onSubmit"; }

Allows you to configure when the field should validate. The keys (initial, whenTouched, whenSubmitted) are states the field/form could be in, and the values (onChange, onBlur, onSubmit) are when you want to validate while in that state.

Note: This behavior only applies when you are using getInputProps. If you're managing the validation manually (using validate, clearError, setTouched, etc), this will have no effect.

Field/form states

When to validate

No matter which option you choose, the form will always be validated again on submit.

Default configuration

By default the field will validate on blur, then validate on every change after the field has been touched our submitted.

  initial: "onBlur",
  whenTouched: "onChange",
  whenSubmitted: "onChange",

() => void

When the form gets submitted and the validation fails, the first invalid input will receive focus. If you have a custom input component that needs to receive focus, you can pass a callback to this option to control what happens when that component needs to receive focus. If this prop is not provided, the input will receive focus as normal (hidden inputs are skipped).