Formik Patterns

When to Use

Use this skill when you need formik form handling with validation patterns. Use when building forms, implementing validation, or handling form submission.

Basic Form Setup

These are React Native-style/custom UI fragments: VStack/Input/Button, generated GraphQL hooks, schemas and navigation are project dependencies, not Formik exports. Web forms require DOM event/submit adapters. Client validation is UX only; validate/authenticate/authorize again on the server, redact mutation errors and never log passwords. enableReinitialize resets dirty edits when initial values change; prompt or merge deliberately before refreshing an edited record.

import { useFormik } from 'formik';
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 characters').required('Password is required'),
});