Работа с библиотеками форм

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

Компоненты для форм

Chakra UI включает ряд компонентов, специально предназначенных для создания форм:

  • FormControl – контейнер для отдельного поля формы, автоматически связывает метку, инпут и сообщение об ошибке.
  • FormLabel – отображает подпись к полю.
  • Input – стандартное текстовое поле.
  • Textarea – многострочное текстовое поле.
  • Select – выпадающий список с опциями.
  • Checkbox и Radio – для выбора одного или нескольких вариантов.
  • Switch – для включения/выключения состояния.
  • FormErrorMessage – компонент для отображения ошибки валидации.

Пример базовой структуры поля с валидацией:

import { FormControl, FormLabel, Input, FormErrorMessage, Button } from "@chakra-ui/react";
import { useForm } from "react-hook-form";

function MyForm() {
  const { handleSubmit, register, formState: { errors } } = useForm();

  const onSub mit = values => console.log(values);

  return (
    <form onSub mit={handleSubmit(onSubmit)}>
      <FormControl isInvalid={errors.name}>
        <FormLabel>Имя</FormLabel>
        <Input {...register("name", { required: "Это поле обязательно" })} />
        <FormErrorMessage>{errors.name && errors.name.message}</FormErrorMessage>
      </FormControl>
      <Button mt={4} colorScheme="teal" type="submit">Отправить</Button>
    </form>
  );
}

Интеграция с React Hook Form

React Hook Form позволяет управлять состоянием формы без лишнего ререндеринга и значительно упрощает работу с валидацией. Chakra UI предоставляет прямую совместимость через пропсы isInvalid и стандартные компоненты формы.

  • register связывает поля с формой.
  • formState.errors хранит информацию о нарушениях валидации.
  • handleSubmit обрабатывает отправку данных.

Для комплексной валидации можно использовать библиотеку Yup:

import * as yup from "yup";
import { yupResolver } from "@hookform/resolvers/yup";

const schema = yup.object().shape({
  email: yup.string().email("Неверный формат почты").required("Обязательное поле"),
  password: yup.string().min(6, "Минимум 6 символов").required("Обязательное поле"),
});

const { register, handleSubmit, formState: { errors } } = useForm({
  resolver: yupResolver(schema)
});

Настройка визуальной обратной связи

Chakra UI позволяет легко стилизовать поля в зависимости от состояния:

  • isInvalid – делает поле красным при ошибке.
  • isDisabled – делает поле недоступным для ввода.
  • isReadOnly – разрешает только чтение значения.
  • focusBorderColor – настраивает цвет рамки при фокусе.
  • errorBorderColor – цвет рамки при ошибке.

Пример:

<Input
  placeholder="Введите email"
  {...register("email")}
  isInvalid={errors.email}
  focusBorderColor="blue.500"
  errorBorderColor="red.500"
/>

Группировка полей

Для организации сложных форм используется VStack или SimpleGrid, чтобы структурировать элементы и поддерживать согласованное расстояние между ними:

import { VStack, SimpleGrid } from "@chakra-ui/react";

<VStack spacing={4}>
  <FormControl>...</FormControl>
  <FormControl>...</FormControl>
</VStack>

<SimpleGrid columns={2} spacing={4}>
  <FormControl>...</FormControl>
  <FormControl>...</FormControl>
</SimpleGrid>

Обработка событий и кастомные компоненты

Chakra UI позволяет легко подключать кастомные компоненты к формам. Любой компонент, который поддерживает проп ref и события onChange, можно интегрировать с React Hook Form или Formik через Controller.

Пример с контроллером:

import { Controller, useForm } from "react-hook-form";
import { Switch, FormControl, FormLabel } from "@chakra-ui/react";

<Controller
  name="subscribe"
  control={control}
  defaultValue={false}
  render={({ field }) => (
    <FormControl display="flex" alignItems="center">
      <FormLabel mb="0">Подписка на новости</FormLabel>
      <Switch {...field} />
    </FormControl>
  )}
/>

Динамические формы

Chakra UI совместим с динамическими структурами форм, где количество полей может меняться. Используя useFieldArray из React Hook Form, можно добавлять и удалять элементы с сохранением всех связей и валидации.

import { useFieldArray, useForm } from "react-hook-form";

const { fields, append, remove } = useFieldArray({ name: "friends", control });

{fields.map((item, index) => (
  <FormControl key={item.id}>
    <Input {...register(`friends.${index}.name`)} />
    <Button onCl ick={() => remove(index)}>Удалить</Button>
  </FormControl>
))}
<Button onCl ick={() => append({ name: "" })}>Добавить друга</Button>

Валидация и сообщения об ошибках

  • Использование FormErrorMessage позволяет показывать текст ошибки непосредственно под полем.
  • Валидацию можно настроить на уровне поля или всей формы.
  • Комбинация Chakra UI и Yup позволяет легко реализовать сложные правила: email, длина строки, регулярные выражения, обязательные поля.

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

Все элементы форм полностью поддерживают систему тем Chakra UI. Можно задавать цвета, размеры, отступы и типографику глобально через extendTheme:

import { extendTheme } from "@chakra-ui/react";

const theme = extendTheme({
  components: {
    Input: {
      variants: {
        outline: { field: { borderColor: "gray.300", _hover: { borderColor: "blue.500" } } }
      }
    }
  }
});

Эти возможности позволяют создавать гибкие, доступные и визуально согласованные формы, минимизируя необходимость писать кастомный CSS и упрощая управление состоянием форм в React-приложениях.

Оглавление