This is a practical Next.js project bootstrapped with create-next-app for practicing React-Hook-Form and Zop libraries.
Explore the demo for better understanding'.
- TSX, Tailwindcss,
- TypeScript
- Nextjs v15.1.3
- Packages: React-Hook-Form
- Routing: using new app directory
- Async Validation: Email field validation is performed asynchronously to ensure a smooth user experience.
- Reset Form: A reset button is available to clear all form fields and start fresh.
- Disable Button Functionality: The submit button can be disabled to prevent multiple submissions.
- Error Handling: onError functionality is implemented to handle and display error messages.
- Touched and Dirty States: Form fields have touched and dirty states, allowing for more precise validation and feedback.
- Get and Set Values: Functions are available to retrieve and set form values programmatically.
- Watch Password Functionality: The password field is watched for changes and updates the form accordingly.
- Render Count: The form's render count is tracked and updated as needed.
- Value As Number and Date: Support for valueAsNumber and valueAsDate allows for more flexible form data handling.
- Dynamic Phone Numbers Field: A dynamic phone numbers field is available for easy input and validation.
- Array Fields: The form supports array fields for more complex data structures.
- Default Values: Default values can be set for form fields to simplify the user experience.
- Validation: Robust validation is implemented to ensure accurate and complete form data.
- Form Submission: The form can be submitted programmatically or through user interaction.
bun install
bun run devor
npm install
npm run dev