Formik

Formik — это популярная библиотека для управления состоянием форм в React-приложениях. В сочетании с Chakra UI она позволяет создавать формы с гибкой валидацией, удобной обработкой ошибок и красивыми компонентами интерфейса. Chakra UI предоставляет компоненты, которые можно легко обернуть в Formik для автоматической привязки к значениям и событиям формы.

Установка зависимостей

Для использования Chakra UI и Formik необходимо установить соответствующие пакеты:

npm install @chakra-ui/react @chakra-ui/icons @emotion/react @emotion/styled framer-motion formik yup
  • @chakra-ui/react — основной пакет Chakra UI.
  • @chakra-ui/icons — набор иконок.
  • formik — библиотека для управления формами.
  • yup — библиотека для схем валидации.

Создание формы с Formik и Chakra UI

Простейший пример формы с полями ввода и кнопкой отправки:

import { Formik, Form, Field } from 'formik';
import { Input, Button, FormControl, FormLabel, FormErrorMessage } from '@chakra-ui/react';

function SimpleForm() {
  return (
    <Formik
      initialValues={{ name: '', email: '' }}
      onSub mit={(values) => console.log(values)}
    >
      {({ errors, touched }) => (
        <Form>
          <FormControl isInvalid={errors.name && touched.name} mb={4}>
            <FormLabel htmlFor="name">Имя</FormLabel>
            <Field as={Input} id="name" name="name" placeholder="Введите имя" />
            <FormErrorMessage>{errors.name}</FormErrorMessage>
          </FormControl>

          <FormControl isInvalid={errors.email && touched.email} mb={4}>
            <FormLabel htmlFor="email">Email</FormLabel>
            <Field as={Input} id="email" name="email" placeholder="Введите email" />
            <FormErrorMessage>{errors.email}</FormErrorMessage>
          </FormControl>

          <Button type="submit" colorScheme="teal">Отправить</Button>
        </Form>
      )}
    </Formik>
  );
}

Ключевые моменты:

  • Field as={Input} — связывает компонент Chakra UI с Formik.
  • FormControl и FormErrorMessage управляют отображением ошибок.
  • isInvalid указывает, когда поле имеет ошибку.

Валидация с помощью Yup

Formik позволяет использовать внешние схемы валидации. Chakra UI совместим с любой схемой, но удобнее всего использовать Yup:

import * as Yup from 'yup';

const validationSchema = Yup.object({
  name: Yup.string().required('Имя обязательно'),
  email: Yup.string().email('Неверный формат email').required('Email обязателен')
});

Передача схемы в Formik:

<Formik
  initialValues={{ name: '', email: '' }}
  validationSchema={validationSchema}
  onSub mit={(values) => console.log(values)}
>
  {/* форма */}
</Formik>

Это позволяет автоматически валидировать поля и передавать ошибки в FormErrorMessage.

Использование Checkbox и Radio с Formik

Для управления состоянием чекбоксов и радиокнопок используются компоненты Chakra UI Checkbox и Radio:

import { Checkbox, RadioGroup, Radio } from '@chakra-ui/react';

<FormControl mb={4}>
  <FormLabel>Подписка</FormLabel>
  <Field as={Checkbox} name="subscribe">
    Получать новости
  </Field>
</FormControl>

<FormControl mb={4}>
  <FormLabel>Пол</FormLabel>
  <Field name="gender">
    {({ field }) => (
      <RadioGroup {...field}>
        <Radio value="male">Мужской</Radio>
        <Radio value="female">Женский</Radio>
      </RadioGroup>
    )}
  </Field>
</FormControl>

Особенности:

  • Field с функцией-потомком позволяет вручную привязать события и значения.
  • Chakra UI RadioGroup принимает value и onChange из Formik через объект field.

Обработка динамических форм

Formik совместно с Chakra UI легко справляется с динамическими формами, например, массивом контактов:

import { FieldArray } from 'formik';
import { HStack, IconButton } from '@chakra-ui/react';
import { AddIcon, DeleteIcon } from '@chakra-ui/icons';

<FieldArray name="contacts">
  {({ push, remove, form }) => (
    <>
      {form.values.contacts.map((contact, index) => (
        <HStack key={index} mb={2}>
          <Field as={Input} name={`contacts[${index}].name`} placeholder="Имя" />
          <IconButton
            icon={<DeleteIcon />}
            onCl ick={() => remove(index)}
            aria-label="Удалить контакт"
          />
        </HStack>
      ))}
      <Button onCl ick={() => push({ name: '' })} leftIcon={<AddIcon />}>
        Добавить контакт
      </Button>
    </>
  )}
</FieldArray>

Ключевые моменты:

  • FieldArray позволяет работать с массивами объектов.
  • Chakra UI предоставляет удобные кнопки и иконки для управления динамическими элементами.

Стилизация и темы

Chakra UI позволяет полностью управлять внешним видом формы через theme или пропсы компонентов. Примеры:

  • size="lg" для увеличенного поля ввода.
  • variant="filled" или variant="outline" для разных стилей Input.
  • colorScheme="red" для кнопок с тревожным действием.

Обработка асинхронной валидации

Formik поддерживает асинхронную валидацию через validate или validationSchema с асинхронными функциями:

<Formik
  initialValues={{ username: '' }}
  validate={async (values) => {
    const errors = {};
    const exists = await checkUsernameExists(values.username);
    if (exists) errors.username = 'Имя уже занято';
    return errors;
  }}
  onSub mit={(values) => console.log(values)}
>
  {/* форма */}
</Formik>

Chakra UI автоматически отобразит ошибки через FormErrorMessage.

Интеграция с компонентами Sel ect и Autocomplete

Для выбора значений из списка или автозаполнения:

import { Sel ect } fr om '@chakra-ui/react';

<FormControl mb={4}>
  <FormLabel>Страна</FormLabel>
  <Field as={Sel ect} name="country" placeholder="Выберите страну">
    <option value="ru">Россия</option>
    <option value="us">США</option>
    <option value="de">Германия</option>
  </Field>
</FormControl>

Особенности:

  • Field as={Select} автоматически связывает значение с Formik.
  • Chakra UI Select поддерживает placeholder, size и variant.

Использование useFormikContext

Для работы с формой вне компонентов Field можно использовать хук useFormikContext:

import { useFormikContext } fr om 'formik';
import { Button } fr om '@chakra-ui/react';

function ResetButton() {
  const { resetForm } = useFormikContext();
  return <Button onCl ick={resetForm}>Сбросить форму</Button>;
}

Хук предоставляет доступ ко всем методам и значениям Formik, позволяя интегрировать пользовательские компоненты с Chakra UI.

Лучшие практики

  • Всегда использовать FormControl и FormErrorMessage для корректного отображения ошибок.
  • Валидацию лучше выносить в схемы Yup для повторного использования.
  • Динамические поля оформлять через FieldArray.
  • Стили компонентов управлять через пропсы size, variant, colorScheme для единообразного UI.
  • Асинхронные проверки выполнять через validate с поддержкой промисов.

Использование Chakra UI с Formik обеспечивает полную совместимость React-компонентов с современными формами, включая валидацию, динамические поля, стилизацию и интеграцию с любыми сторонними схемами.

Оглавление