Form

Create fully functional React forms with just a few lines of code.

Props#

PropTypeDefaultDescription
onSubmitrequiredSubmitHandler<TFieldValues>The submit handler.
childrenstring | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | PromiseLikeOfReactNode | ((props: FormRenderContext<...>) => ReactNode)The form children, can be a render prop or a ReactNode.
colorScheme"whiteAlpha" | "blackAlpha" | "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink" | "linkedin" | "facebook" | "messenger" | "whatsapp" | "twitter" | "telegram" | "primary" | "secondary" | "indigo"The visual color appearance of the component
contextTContext
criteriaModeCriteriaMode
defaultValuestype ONLY_FOR_FORMAT = | AsyncDefaultValues<TFieldValues> | DefaultValues<TFieldValues>
delayErrornumber
disabledboolean
errorsFieldErrors<TFieldValues>
fieldResolverFieldResolverThe field resolver, used to resolve the fields from schemas.
fieldsDefaultFieldOverridesField overrides
formRefRefObject<UseFormReturn<TFieldValues, TContext>>The Hook Form state ref.
mode"onChange" | "onBlur" | "onSubmit" | "all" | "onTouched"
onChangeWatchObserver<TFieldValues>Triggers when any of the field change.
onErrorSubmitErrorHandler<TFieldValues>Triggers when there are validation errors.
progressiveboolean
resetOptionsPartial<{ keepDirtyValues: boolean keepErrors: boolean keepDirty: boolean keepValues: boolean keepDefaultValues: boolean keepIsSubmitted: boolean keepIsSubmitSuccessful: boolean keepTouched: boolean keepIsValid: boolean keepSubmitCount: boolean }>
resolverResolver<TFieldValues, TContext>
reValidateMode"onChange" | "onBlur" | "onSubmit"
schemaNonNullable<TSchema>The form schema.
shouldFocusErrorboolean
shouldUnregisterboolean
shouldUseNativeValidationboolean
sizestringThe size of the Form
valuesTFieldValues
variant"horizontal"The variant of the Form

Was this helpful?