> For the complete documentation index, see [llms.txt](https://oleksandr-khomiak.gitbook.io/react/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://oleksandr-khomiak.gitbook.io/react/teoriya/formi/formik.md).

# Formik

```jsx
import React from 'react';

// Бібліотека формік
import { Formik, Form, Field } from 'formik';

//  Компонент форми
const RegisterForm = () => {
  // початкові значення полів форми
  const initialValues = { name: '', email: '', password: '' };

  // Обробник сабміту
  const handleSubmit = (values, actions) => {
    // у обʼєкт values повертаються дані з форми
    console.log('values', values);
    // тут буде проходити реєстрація
    actions.resetForm();
  };

  return (
    <div>
      <Formik
        initialValues={initialValues}
        onSubmit={handleSubmit}
      >
        <Form autoComplete="off">
          <label htmlFor="name">Name</label>
          <Field type="text" name="name" placeholder="Enter your name" />

          <label htmlFor="email">
            Email
            <Field type="text" name="email" placeholder="Enter email" />
          </label>

          <label htmlFor="name">
            Password
            <Field
              type="password"
              name="password"
              placeholder="Enter password"
            />
          </label>

          <button type="submit">Sign Up</button>
        </Form>
      </Formik>
    </div>
  );
};

export default RegisterForm;
```