Formik - бібліотека роботи з формами у react

npm install formik

В HTML-документі компонент Form рендерить звичайний тег form, але з розширеним функціоналом бібліотеки Formik. Для того, щоб можна було відправити форму, використовуємо тег button, для кнопки відправки в бібліотеці немає спеціального компонента.

import { Formik, Form } from 'formik';


const FeedbackForm = () => {
  return (
    <Formik initialValues={{}} onSubmit={() => {}}>
			<Form>
				<button type="submit">Submit</button>
			</Form>
    </Formik>
  );
};

В бібліотеці Formik немає компонентів для створення label та інших семантичних елементів форми, таких як fieldset та legend. Для цього використовуються звичайні теги. Не забуваємо використовувати хук useId для створення унікальних ідентифікаторів полів.

import { useId } from "react";
import { Formik, Form, Field } from "formik";

const initialValues = {
  username: "",
  email: "",
};

const FeedbackForm = () => {
  const nameFieldId = useId();
  const emailFieldId = useId();

  const handleSubmit = (values, actions) => {
    console.log(values);
    actions.resetForm();
  };

  return (
    <Formik initialValues={initialValues} onSubmit={handleSubmit}>
      <Form>
        <label htmlFor={nameFieldId}>Username</label>
        <Field type="text" name="username" id={nameFieldId} />

        <label htmlFor={emailFieldId}>Email</label>
        <Field type="email" name="email" id={emailFieldId} />

        <button type="submit">Submit</button>
      </Form>
    </Formik>
  );
};