✨ Introducing to you: new hooks 🐺 - Authentication and Forms made easy.

useFormik

Simplifies Formik setup and usage.

useFormik
Simplified Formik usage with validation

Installation

Props

PropTypeDefaultDescription
configFormikConfig<T>-Configuration object passed to Formik

See useFormik for more details about the configuration options.

Data

PropertyTypeDescription
onSubmit(handler) => (e?) => voidSimplified and memoized submit handler
valuesTCurrent form values
errorsFormikErrors<T>Form validation errors
touchedFormikTouched<T>Fields that have been touched
...formikFormikProps<T>All methods returned by useFormik (handleChange, reset, etc.)

Key Features & Details

  • Built on Formik – see Formik Docs for full API.
  • Simplified onSubmit signature that handles form submission automatically.
  • Memoized handler with useCallback to prevent unnecessary re-renders.
  • Exposes all useFormik methods (handleChange, resetForm, setFieldValue, etc.).
  • Optional debug logging of values and errors changes in development mode.
  • Automatic form event handling with preventDefault().

Common Use Cases

  • Single-field forms with basic validation (e.g., contact forms, search).
  • Multi-field forms with initial values and complex validation.
  • Forms requiring field-level validation and error display.
  • Dynamic forms with conditional fields and validation.
  • Rapid prototyping of form-driven UIs with Formik's ecosystem.

Examples

Basic Usage

const { values, errors, touched, handleChange, handleBlur, onSubmit } =
  useFormikHook<{
    firstName: string;
  }>({
    initialValues: { firstName: '' },
    validate: (values) => {
      const errors: any = {};
      if (!values.firstName) {
        errors.firstName = 'First name is required';
      }
      return errors;
    },
    onSubmit: () => {}, // Will be overridden by onSubmit handler
  });
 
return (
  <form onSubmit={onSubmit((data) => alert(`Hello, ${data.firstName}!`))}>
    <div>
      <label htmlFor="firstName">First Name</label>
      <input
        id="firstName"
        name="firstName"
        value={values.firstName}
        onChange={handleChange}
        onBlur={handleBlur}
      />
      {touched.firstName && errors.firstName && <span>{errors.firstName}</span>}
    </div>
    <button type="submit">Submit</button>
  </form>
);

Handling Validation with Yup

import * as Yup from 'yup';
 
const validationSchema = Yup.object({
  email: Yup.string().email('Invalid email').required('Email is required'),
  password: Yup.string()
    .min(6, 'Password must be at least 6 characters')
    .required('Password is required'),
});
 
const { values, errors, touched, handleChange, handleBlur, onSubmit } =
  useFormikHook({
    initialValues: { email: '', password: '' },
    validationSchema,
    onSubmit: () => {}, // Will be overridden
  });
 
const handleFormSubmit = (data, { setSubmitting }) => {
  console.log('Form Data:', data);
  setSubmitting(false);
};
 
return (
  <form onSubmit={onSubmit(handleFormSubmit)}>
    <div>
      <label htmlFor="email">Email</label>
      <input
        id="email"
        name="email"
        type="email"
        value={values.email}
        onChange={handleChange}
        onBlur={handleBlur}
      />
      {touched.email && errors.email && <span>{errors.email}</span>}
    </div>
    <div>
      <label htmlFor="password">Password</label>
      <input
        id="password"
        name="password"
        type="password"
        value={values.password}
        onChange={handleChange}
        onBlur={handleBlur}
      />
      {touched.password && errors.password && <span>{errors.password}</span>}
    </div>
    <button type="submit">Submit</button>
  </form>
);

Resetting the Form

const { values, handleChange, onSubmit, resetForm } = useFormikHook<{
  firstName: string;
}>({
  initialValues: { firstName: 'John' },
  onSubmit: () => {},
});
 
const handleFormSubmit = (data) => {
  console.log('Submitted:', data);
  resetForm({ values: { firstName: '' } });
};
 
return (
  <form onSubmit={onSubmit(handleFormSubmit)}>
    <div>
      <label htmlFor="firstName">First Name</label>
      <input
        id="firstName"
        name="firstName"
        value={values.firstName}
        onChange={handleChange}
      />
    </div>
    <button type="submit">Submit</button>
    <button type="button" onClick={() => resetForm()}>
      Reset
    </button>
  </form>
);

Related