Provides robust patterns and reusable components for handling forms in React. Use this skill when building forms that require validation, error handling, multi-step flows, file uploads, or complex submission logic. It covers libraries like React Hook Form, Zod, and Yup, offering templates and best practices for creating performant and user-friendly forms.
This skill provides a comprehensive guide and reusable assets for building robust and user-friendly forms in React.
Handling forms in React can be complex. This skill simplifies the process by providing battle-tested patterns and reusable components for common form-related tasks. It focuses on using react-hook-form for performance and developer experience, paired with schema validation libraries like zod or yup.
The core workflow for building a form with this skill is:
react-hook-form: Initialize the form hook with your schema.TextInput, Select, etc.) which are pre-wired to work with react-hook-form.onSubmit handler to process valid form data.This skill supports multiple validation libraries. Here's a quick guide to help you choose:
references/zod.md for examples.references/yup.md for examples.This skill provides detailed guides on various form handling patterns in the references/ directory.
references/react-hook-form.md.references/validation-patterns.md.references/error-handling.md.references/advanced-patterns.md.This skill includes a set of reusable, unstyled form components in assets/components/. These components are designed to be easily integrated into any React project and are pre-configured to work with react-hook-form.
assets/components/TextInput.tsxassets/components/Select.tsxassets/components/Checkbox.tsxassets/components/FileUpload.tsxTo use them, copy them into your project's component directory.
A complete project template for a basic React Hook Form setup can be found in assets/templates/react-hook-form-setup/. You can use this to quickly bootstrap a new form.