# Formik Patterns

Formik form handling with validation patterns.

- Repository: https://github.com/ChrisWiles/claude-code-showcase (6078 stars)
- Category: Engineering
- License: see repository
- Last updated: 2026-01-06
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add ChrisWiles/claude-code-showcase --skill formik-patterns -g -a claude-code -y`
Codex: `npx skills add ChrisWiles/claude-code-showcase --skill formik-patterns -g -a codex -y`
Cursor: `npx skills add ChrisWiles/claude-code-showcase --skill formik-patterns -g -a cursor -y`
Gemini CLI: `npx skills add ChrisWiles/claude-code-showcase --skill formik-patterns -g -a gemini-cli -y`

## Description

Formik form handling with validation patterns. Use when building forms, implementing validation, or handling form submission.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# Formik Patterns

## Basic Form Setup

```tsx
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'),
});

const LoginForm = () => {
  const formik = useFormik({
    initialValues: {
      email: '',
      password: '',
    },
    validationSchema,
    onSubmit: async (values) => {
      await loginMutation({ variables: { input: values } });
    },
  });

  return (
    <VStack gap="$4">
      <Input
        label="Email"
        value={formik.values.email}
        onChangeText={formik.handleChange('email')}
        onBlur={formik.handleBlur('email')}
        error={formik.touched.email ? formik.errors.email : undefined}
        keyboardType="email-address"
        autoCapitalize="none"
      />

      <Input
        label="Password"
        value={formik.values.password}
        onChangeText={formik.handleChange('password')}
        onBlur={formik.handleBlur('password')}
        error={formik.touched.password ? formik.errors.password : undefined}
        secureTextEntry
      />

      <Button
        onPress={formik.handleSubmit}
        isDisabled={!formik.isValid || formik.isSubmitting}
        isLoading={formik.isSubmitting}
      >
        Login
      </Button>
    </VStack>
  );
};
```

## Validation Schemas

### Common Patterns

```typescript
import * as yup from 'yup';

// Email
email: yup.string()
  .email('Invalid email address')
  .required('Email is required')

// Password with requirements
password: yup.string()
  .min(8, 'Must be at least 8 characters')
  .matches(/[a-z]/, 'Must contain lowercase letter')
  .matches(/[A-Z]/, 'Must contain uppercase letter')
  .matches(/[0-9]/, 'Must contain number')
  .required('Password is required')

The rest: https://github.com/ChrisWiles/claude-code-showcase/blob/HEAD/.claude/skills/formik-patterns/SKILL.md