Ejemplos de React Hook Form, probados y en vivo

Ejemplos de React Hook Form

Ejemplos de React Hook Form: Zod, field arrays, asistentes y demos en vivo | We.Inc

Ejemplos funcionales de React Hook Form que puedes probar en la página: validación con Zod, comprobaciones asíncronas, field arrays, un asistente por pasos, subida de archivos, Controller y server actions de Next.js.

React Hook Form gestiona formularios de React con inputs no controlados: invoca useForm, aplica register("name") en cada input y envuelve tu función de envío en handleSubmit. Añade zodResolver para validar con un esquema de Zod. Los formularios de abajo funcionan en esta página: reglas, Zod, comprobaciones asíncronas, field arrays, un asistente, subida de archivos y server actions.

Instalación

Necesitas
Comando

La librería
npm install react-hook-form

Validación con esquema
npm install zod @hookform/resolvers

Rellena cada demo, envíala con errores y luego corrígelos. El código de al lado es el que se ejecuta. Los errores se vinculan a sus inputs con aria-describedby y se anuncian con role="alert", así que los formularios también funcionan con lector de pantalla.

Invoca useForm, opcionalmente con defaultValues y un resolver.
Aplica register("field") en cada input; da a cada input una etiqueta visible.
Envuelve tu función de envío: onSubmit={handleSubmit(save)}.
Muestra formState.errors.field?.message junto a cada campo.
Desactiva el botón con isSubmitting mientras se guarda.

Define defaultValues para todos los campos. Hace que reset sea predecible y evita los avisos de controlado a no controlado.
Usa valueAsNumber o z.coerce.number() en los inputs numéricos; si no, los inputs siempre devuelven cadenas.
Elige el modo onTouched en formularios de registro: nada de errores en rojo mientras alguien aún escribe su primera respuesta.
Añade noValidate al formulario cuando valides en JavaScript, para que no aparezcan a la vez los globos del navegador y tus mensajes.
Guarda el esquema de Zod en su propio archivo para que el servidor pueda importarlo sin cargar React.

Preguntas frecuentes

¿React Hook Form es mejor que Formik?

React Hook Form hace menos re-renders porque los inputs siguen sin controlar y lee los valores mediante refs. Formik guarda cada valor en el estado de React. En formularios grandes, React Hook Form suele ser más rápido y necesita menos código.

¿Cómo uso React Hook Form con Zod?

Instala zod y @hookform/resolvers, define un esquema z.object y pasa resolver: zodResolver(schema) a useForm. Usa z.infer<typeof schema> como tipo del formulario; los mensajes de error salen del esquema.

¿Cómo reinicio un formulario después de enviarlo?

Invoca reset() dentro de tu handler de envío cuando el guardado tenga éxito, o pasa valores nuevos con reset(values). También puedes invocar reset en un effect cuando isSubmitSuccessful pase a true.

¿Por qué mi campo numérico es una cadena?

Los inputs HTML devuelven texto. Regístralo con valueAsNumber: true, o usa z.coerce.number() en un esquema de Zod, para obtener un número real.

¿Puedo usar React Hook Form con shadcn/ui?

Sí. shadcn/ui incluye un componente Form construido sobre el Controller de React Hook Form. Nuestra guía de formularios y tablas con shadcn lo explica con un ejemplo en vivo.

Mensajes de error accesibles

Cada input necesita una etiqueta vinculada con htmlFor, no solo un placeholder. Cuando un campo es incorrecto, pon aria-invalid en el input y apunta aria-describedby al mensaje, para que los lectores de pantalla lean el error junto con el campo.
Al enviar, React Hook Form enfoca por defecto el primer campo inválido (shouldFocusError). Déjalo activado; es la forma más rápida de que alguien que usa el teclado encuentre el fallo.

Errores comunes

Usar el índice como key en un field array, lo que mezcla las filas tras eliminar una.
Invocar watch() en la parte superior de un formulario grande, lo que vuelve a renderizar todo el formulario con cada tecla. Usa useWatch en un componente hijo pequeño.
Confiar solo en la validación del navegador. Todo lo que se envía a tu servidor debe comprobarse de nuevo allí.

Chuleta de la API

Las partes de la API que más vas a usar

API
Úsala para

register(name, rules)
Inputs nativos, selects, textareas y casillas

handleSubmit(onValid, onInvalid?)
Valida y luego invoca tu función con los valores

formState.errors / isSubmitting / isDirty
Mensajes de error y estados del botón

mode: onSubmit | onBlur | onTouched | onChange | all
Cuándo se ejecuta la validación (onSubmit es el valor por defecto)

resolver: zodResolver(schema)
Validar con un esquema de Zod (o Yup, Valibot)

useFieldArray
Filas repetidas: añadir, quitar, mover

Controller / useController
Inputs personalizados sin ref

trigger(names)
Validar algunos campos ya, como en un paso del asistente

setError / clearErrors
Errores que devuelve el servidor

reset(values)
Cargar datos guardados o limpiar tras el envío

watch / useWatch
Leer un valor mientras cambia (useWatch provoca menos re-renders)

Validación: reglas integradas, Zod y comprobaciones asíncronas

Formulario básico con reglas integradas

register conecta un input por su nombre y acepta reglas al estilo HTML. errors guarda un mensaje por campo tras un envío fallido.

Esquema de Zod con zodResolver

Un solo esquema te da las reglas de validación, los mensajes de error y el tipo de TypeScript. refine comprueba dos campos a la vez, y path indica qué campo recibe el error.

Validación asíncrona (¿está libre el nombre de usuario?)

Una función validate puede devolver una promesa. Devuelve true cuando el valor es correcto, o una cadena que se mostrará como error. Combínala con el modo onBlur para que no se ejecute con cada tecla.

Field arrays, asistentes, archivos e inputs personalizados

Field arrays (añadir y quitar filas)

useFieldArray gestiona una lista dentro del formulario. Usa field.id como key, nunca el índice, para que React mantenga cada input unido a su fila.

Asistente por pasos

Usa un solo formulario para todos los pasos e invoca trigger con los campos del paso actual antes de avanzar. Los valores de los pasos anteriores siguen en el formulario, así que el último envío lo tiene todo.

Subida de archivos con comprobación de tamaño y tipo

Un input de archivo se registra como cualquier otro; su valor es un FileList. Comprueba el tamaño y el tipo en validate y envía el archivo con FormData.

Componentes controlados con Controller

Los inputs que no exponen una ref, como muchos selectores de fecha y selects personalizados, se conectan mediante Controller. Este pasa value y onChange a tu componente.

Enviar al servidor

Server action de Next.js, validada dos veces

Valida en el navegador para dar una respuesta rápida y de nuevo en el servidor, porque el navegador se puede saltar. Compartir un único esquema de Zod mantiene ambos sincronizados; setError muestra los problemas del servidor en el campo correcto.

¿Necesitas un formulario HTML simple? Consulta

cómo añadir un formulario de contacto

Enviado:

Nombre

Escribe tu nombre

Escribe tu email

Ese email no parece correcto

Enviando...

Enviar

Escribe un email válido

Al menos 8 caracteres

Las contraseñas no coinciden

Contraseña

Confirmar contraseña

Crear cuenta

Esta demo simula el servidor con una breve espera. Ocupados: admin, studio, hello.

Nombre de usuario

Elige un nombre de usuario

Ese nombre de usuario ya está ocupado

Comprobando...

Reservar

Diseño de logo

Nombre del artículo {n}

Cantidad del artículo {n}

Artículo

Quitar

Añadir artículo

Guardar

Obligatorio

Paso {n} de {total}

Empresa

Tamaño del equipo

Plan

Elige

Starter

Team

Rellena los campos resaltados.

Atrás

Finalizar

Logo (PNG o JPG, hasta 2 MB; se queda en tu navegador)

Elige un archivo

Máximo 2 MB

Solo PNG o JPG

Subir

Al menos 10

Presupuesto:

Empieza gratis · Sin tarjeta de crédito

Ejemplos de React Hook Form, probados y en vivo