Este proyecto implementa un formulario accesible en React utilizando react-hook-form y yup para la validación.

• Validación con yup.
• Manejo de estado del formulario con react-hook-form.
• Modos de validación: onSubmit, onBlur, onChange, all.
• Carga de valores predeterminados de manera asíncrona.
• Feedback de validación y mensajes de error.
• Visualización del estado y datos del formulario en tiempo real.

Para instalar las dependencias del proyecto, ejecuta:

npm install

Ejecuta el proyecto con:

npm start

📦 src
 ┣ 📂 components
 ┃ ┣ 📜 Checkbox.tsx
 ┃ ┣ 📜 DataDisplay.tsx
 ┃ ┣ 📜 Form.tsx
 ┃ ┣ 📜 FormStateDisplay.tsx
 ┃ ┣ 📜 Input.tsx
 ┃ ┗ 📜 Select.tsx
 ┣ 📜 App.tsx
 ┗ 📜 main.tsx

• Define el esquema de validación con yup.
• Configura react-hook-form.
• Muestra el formulario y los estados en tiempo real.

• Renderiza los campos del formulario e integra los componentes de entrada.

• Componentes reutilizables con integración en react-hook-form.

• Muestra datos en tiempo real en un formato JSON.

• Muestra el estado del formulario en tiempo real.

El esquema de validación se define en App.tsx:

const schema = yup.object({
 name: yup.string().required('El nombre es obligatorio'),
 email: yup.string().email('Correo inválido').required('El correo es obligatorio'),
 country: yup.string().required('Selecciona un país'),
 acceptTerms: yup.boolean().oneOf([true], 'Debes aceptar los términos'),
 darkMode: yup.boolean(),
});

Este proyecto está bajo la licencia MIT.