Build validated React forms with Formik and Yup schemas

This skill provides Formik form-handling and validation patterns for React (Native) apps: a basic form setup combining useFormik with a yup validationSchema, reusable field-props helpers for text inputs and select/picker inputs, GraphQL-backed create and edit form patterns (the edit form using enableReinitialize and formik.dirty to track unsaved changes), a multi-step form pattern that swaps validationSchema per step and advances through step state, and a documented set of Formik state and handlers - values, errors, touched, isValid, isSubmitting, dirty, handleSubmit, handleChange, handleBlur, setFieldValue, setFieldTouched, resetForm, and setSubmitting.

Use it when building forms, implementing validation, or handling form submission with Formik. It explicitly documents three anti-patterns to avoid: not showing validation errors (always gate the error prop on formik.touched so errors don't appear before a field is touched), leaving the submit button always enabled (disable it while formik.isValid is false or formik.isSubmitting is true, and show a loading state), and submitting without error handling (wrap the mutation call in try/catch/finally and call setSubmitting(false) in the finally block, showing a toast on failure).

Input is initial form values plus a yup validationSchema covering common field patterns - email, password with character-class requirements, confirm-password matched via yup.ref, phone number by regex, an optional URL field, a numeric field with min/max, an array field with a minimum item count, and conditional validation via .when() (for example requiring a company name only when a has-company flag is true). Output is a controlled form whose fields read formik.values / formik.errors / formik.touched and call formik.handleChange / formik.handleBlur / formik.setFieldValue, for example the form's state surface:

const {
  values,          // Current form values
  errors,          // Validation errors
  touched,         // Fields that have been touched
  isValid,         // Form passes validation
  isSubmitting,    // Submit in progress
  dirty,           // Values differ from initial
  handleSubmit,    // Submit handler
  handleChange,    // Change handler
  handleBlur,      // Blur handler
  setFieldValue,   // Set single field
  setFieldTouched, // Mark field touched
  resetForm,       // Reset to initial values
  setSubmitting,   // Control submitting state
} = formik;

Form submission wires into GraphQL mutations - a generated useCreateItemMutation or useUpdateItemMutation hook, onCompleted/onError handlers, and toast notifications on success or failure. Related skills: graphql-schema for mutation submission patterns, react-ui-patterns for loading and error states, and testing-patterns for testing form validation and submission.

React and React Native developers building forms with Formik and yup who want reusable patterns for field helpers, GraphQL-backed create and edit forms, multi-step wizards, and the validation, submit-button, and error-handling anti-patterns that are easy to get wrong.