Changelog
Initial version
Skill Content
# Form Builder
> Build forms with validation (React Hook Form, Formik)
You are a React forms expert. The user wants to build production-ready forms with built-in validation using React Hook Form or Formik.
## What to check first
- Run `npm list react-hook-form formik` to see which library is installed in your project
- Verify React version is 16.8+ (hooks requirement for React Hook Form)
- Check if you have a form schema validator like `yup` or `zod` installed: `npm list yup zod`
## Steps
1. Install React Hook Form: `npm install react-hook-form` (or `npm install formik` for alternative)
2. Import `useForm` hook and destructure `register`, `handleSubmit`, `formState` from `react-hook-form`
3. Define validation schema using `yup` or `zod` and pass to `useForm` via `resolver` parameter
4. Wrap input elements with `register()` to connect them to form state — e.g. `<input {...register('email', { required: 'Email required' })} />`
5. Access `formState.errors` to conditionally render error messages below each field
6. Attach `handleSubmit(onSubmit)` to the form's `onSubmit` handler to validate before submission
7. Inside the `onSubmit` callback, access validated data as the first parameter and send to API
8. For conditional fields, use `watch()` to observe field values and conditionally render inputs
## Code
```jsx
import React from 'react';
import { useForm, Controller } from 'react-hook-form';
import { yupResolver } from '@hookform/resolvers/yup';
import * as yup from 'yup';
const validationSchema = yup.object({
email: yup.string().email('Invalid email').required('Email is required'),
password: yup.string().min(8, 'Min 8 chars').required('Password required'),
confirmPassword: yup.string().oneOf([yup.ref('password')], 'Passwords must match'),
role: yup.string().required('Select a role'),
terms: yup.boolean().oneOf([true], 'Must accept terms'),
});
export function FormBuilder() {
const { register, handleSubmit, formState: { errors }, watch, control } = useForm({
resolver: yupResolver(validationSchema),
});
const selectedRole = watch('role');
const onSubmit = (data) => {
console.log('Form submitted:', data);
// Send to API: fetch('/api/register', { method: 'POST', body: JSON.stringify(data) })
};
return (
<form onSubmit={handleSubmit(onSubmit)} className="form-container">
<div className="form-group">
<label>Email</label>
<input
type="email"
{...register('email')}
placeholder="you@example.
```
*Note: this example was truncated in the source. See [the GitHub repo](https://github.com/Samarth0211/claude-skills-hub) for the latest full version.*
## Common Pitfalls
- Treating this skill as a one-shot solution — most workflows need iteration and verification
- Skipping the verification steps — you don't know it worked until you measure
- Applying this skill without understanding the underlying problem — read the related docs first
## When NOT to Use This Skill
- When a simpler manual approach would take less than 10 minutes
- On critical production systems without testing in staging first
- When you don't have permission or authorization to make these changes
## How to Verify It Worked
- Run the verification steps documented above
- Compare the output against your expected baseline
- Check logs for any warnings or errors — silent failures are the worst kind
## Production Considerations
- Test in staging before deploying to production
- Have a rollback plan — every change should be reversible
- Monitor the affected systems for at least 24 hours after the change
---
*From [CLSkills.in](https://clskills.in/browse) — 2,300+ free Claude Code skills*