ReddRadar
Agent skill
formik
Manages React form state with Formik using validation, field arrays, and form context. Use when building complex forms in React, handling form submission, or integrating with Yup validation.
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/data/formik
SKILL.md
Formik
Form state management library for React with built-in validation, submission handling, and field management.
Quick Start
npm install formik yup
import { Formik, Form, Field, ErrorMessage } from 'formik';
import * as Yup from 'yup';
const schema = Yup.object({
email: Yup.string().email('Invalid email').required('Required'),
password: Yup.string().min(8, 'Too short').required('Required'),
});
function LoginForm() {
return (
<Formik
initialValues={{ email: '', password: '' }}
validationSchema={schema}
onSubmit={(values, { setSubmitting }) => {
console.log(values);
setSubmitting(false);
}}
>
{({ isSubmitting }) => (
<Form>
<Field name="email" type="email" />
<ErrorMessage name="email" component="div" />
<Field name="password" type="password" />
<ErrorMessage name="password" component="div" />
<button type="submit" disabled={isSubmitting}>
Submit
</button>
</Form>
)}
</Formik>
);
}
useFormik Hook
import { useFormik } from 'formik';
function Form() {
const formik = useFormik({
initialValues: {
email: '',
password: '',
},
validationSchema: schema,
onSubmit: (values) => {
console.log(values);
},
});
return (
<form onSubmit={formik.handleSubmit}>
<input
name="email"
type="email"
onChange={formik.handleChange}
onBlur={formik.handleBlur}
value={formik.values.email}
/>
{formik.touched.email && formik.errors.email && (
<div>{formik.errors.email}</div>
)}
<input
name="password"
type="password"
{...formik.getFieldProps('password')}
/>
{formik.touched.password && formik.errors.password && (
<div>{formik.errors.password}</div>
)}
<button type="submit">Submit</button>
</form>
);
}
Field Component
Basic Fields
<Field name="firstName" />
<Field name="email" type="email" />
<Field name="message" as="textarea" />
<Field name="color" as="select">
<option value="">Select</option>
<option value="red">Red</option>
<option value="blue">Blue</option>
</Field>
With Custom Component
<Field name="phone">
{({ field, meta }) => (
<div>
<input {...field} className={meta.error ? 'error' : ''} />
{meta.touched && meta.error && <span>{meta.error}</span>}
</div>
)}
</Field>
Custom Input Component
const TextInput = ({ label, ...props }) => {
const [field, meta] = useField(props);
return (
<div>
<label htmlFor={props.name}>{label}</label>
<input {...field} {...props} />
{meta.touched && meta.error && <div className="error">{meta.error}</div>}
</div>
);
};
// Usage
<TextInput label="Email" name="email" type="email" />
Form Component
<Formik initialValues={...} onSubmit={...}>
<Form>
{/* Form fields */}
</Form>
</Formik>
Or with render prop:
<Formik initialValues={...} onSubmit={...}>
{(formikProps) => (
<form onSubmit={formikProps.handleSubmit}>
{/* Access formik state */}
</form>
)}
</Formik>
Validation
With Yup
import * as Yup from 'yup';
const validationSchema = Yup.object({
firstName: Yup.string()
.max(15, 'Must be 15 characters or less')
.required('Required'),
lastName: Yup.string()
.max(20, 'Must be 20 characters or less')
.required('Required'),
email: Yup.string()
.email('Invalid email')
.required('Required'),
});
<Formik validationSchema={validationSchema} ... />
Custom Validate Function
<Formik
validate={(values) => {
const errors = {};
if (!values.email) {
errors.email = 'Required';
} else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(values.email)) {
errors.email = 'Invalid email';
}
return errors;
}}
...
/>
Field-Level Validation
const validateUsername = async (value) => {
if (!value) return 'Required';
const taken = await checkUsername(value);
if (taken) return 'Username taken';
};
<Field name="username" validate={validateUsername} />
Field Arrays
import { FieldArray } from 'formik';
<Formik
initialValues={{
friends: [''],
}}
onSubmit={...}
>
{({ values }) => (
<Form>
<FieldArray name="friends">
{({ push, remove }) => (
<div>
{values.friends.map((friend, index) => (
<div key={index}>
<Field name={`friends.${index}`} />
<button type="button" onClick={() => remove(index)}>
Remove
</button>
</div>
))}
<button type="button" onClick={() => push('')}>
Add Friend
</button>
</div>
)}
</FieldArray>
</Form>
)}
</Formik>
Array of Objects
<Formik
initialValues={{
contacts: [{ name: '', email: '' }],
}}
...
>
{({ values }) => (
<FieldArray name="contacts">
{({ push, remove }) => (
<>
{values.contacts.map((contact, index) => (
<div key={index}>
<Field name={`contacts.${index}.name`} placeholder="Name" />
<Field name={`contacts.${index}.email`} placeholder="Email" />
<button onClick={() => remove(index)}>Remove</button>
</div>
))}
<button onClick={() => push({ name: '', email: '' })}>
Add Contact
</button>
</>
)}
</FieldArray>
)}
</Formik>
Formik Context
useFormikContext
import { useFormikContext } from 'formik';
function SubmitButton() {
const { isSubmitting, isValid } = useFormikContext();
return (
<button type="submit" disabled={isSubmitting || !isValid}>
{isSubmitting ? 'Submitting...' : 'Submit'}
</button>
);
}
Accessing Form State
function FormDebug() {
const { values, errors, touched, isValid, dirty } = useFormikContext();
return (
<pre>
{JSON.stringify({ values, errors, touched, isValid, dirty }, null, 2)}
</pre>
);
}
Form State
Formik Props
<Formik ...>
{({
// Values
values, // Form values
initialValues, // Initial values
errors, // Validation errors
touched, // Touched fields
// Status
isSubmitting, // Submit in progress
isValid, // No validation errors
isValidating, // Validation in progress
dirty, // Values changed from initial
// Handlers
handleSubmit, // Form submit handler
handleChange, // Input change handler
handleBlur, // Input blur handler
handleReset, // Reset form
// Helpers
setFieldValue, // Set specific field
setFieldTouched, // Mark field as touched
setFieldError, // Set field error
setValues, // Set all values
setErrors, // Set all errors
setTouched, // Set all touched
setStatus, // Set form status
setSubmitting, // Set submitting state
resetForm, // Reset to initial
validateForm, // Trigger validation
validateField, // Validate specific field
// Getters
getFieldProps, // Get field props helper
getFieldMeta, // Get field meta (error, touched)
getFieldHelpers, // Get field helpers
}) => (
<Form>...</Form>
)}
</Formik>
Submission
Basic Submit
<Formik
onSubmit={(values, { setSubmitting }) => {
submitToServer(values).then(() => {
setSubmitting(false);
});
}}
...
/>
Async Submit
<Formik
onSubmit={async (values, { setSubmitting, setStatus, resetForm }) => {
try {
await api.submit(values);
resetForm();
setStatus({ success: true });
} catch (error) {
setStatus({ error: error.message });
} finally {
setSubmitting(false);
}
}}
...
/>
With Server Errors
<Formik
onSubmit={async (values, { setErrors }) => {
try {
await api.submit(values);
} catch (error) {
if (error.validationErrors) {
setErrors(error.validationErrors);
}
}
}}
...
/>
Enable/Disable Reinitialize
<Formik
initialValues={userData}
enableReinitialize={true} // Update when initialValues change
...
/>
TypeScript
interface FormValues {
email: string;
password: string;
}
const initialValues: FormValues = {
email: '',
password: '',
};
<Formik<FormValues>
initialValues={initialValues}
onSubmit={(values: FormValues) => {
console.log(values.email);
}}
...
/>
Typed Custom Field
import { useField, FieldHookConfig } from 'formik';
interface TextInputProps extends FieldHookConfig<string> {
label: string;
}
const TextInput: React.FC<TextInputProps> = ({ label, ...props }) => {
const [field, meta] = useField(props);
return (
<div>
<label>{label}</label>
<input {...field} {...props} />
{meta.touched && meta.error && <div>{meta.error}</div>}
</div>
);
};
See references/patterns.md for advanced patterns and recipes.
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
Didn't find tool you were looking for?