FormControl

FormControl — это базовый компонент для работы с формами в Chakra UI. Он обеспечивает удобное управление состояниями элементов формы (например, Input, Select, Textarea) и их взаимодействие с FormLabel, FormErrorMessage и FormHelperText. Основная цель FormControl — унификация и упрощение создания форм с валидированием и корректным отображением ошибок.

Основные свойства FormControl

isRequired Устанавливает, что поле обязательно для заполнения. Автоматически добавляет индикатор обязательного поля в FormLabel.
```
import { FormControl, FormLabel, Input } from "@chakra-ui/react";

<FormControl isRequired>
  <FormLabel>Имя</FormLabel>
  <Input placeholder="Введите имя" />
</FormControl>
```
isInvalid Используется для отображения состояния ошибки. Если true, то FormErrorMessage становится видимой, а стили поля подсвечиваются красным.
```
<FormControl isInvalid={hasError}>
  <FormLabel>Email</FormLabel>
  <Input type="email" />
  <FormErrorMessage>Неверный формат email</FormErrorMessage>
</FormControl>
```
isDisabled Деактивирует все вложенные элементы формы, делая их недоступными для ввода и взаимодействия.
```
<FormControl isDisabled>
  <FormLabel>Пароль</FormLabel>
  <Input type="password" />
</FormControl>
```
isReadOnly Позволяет сделать поле доступным только для чтения без возможности редактирования.
```
<FormControl isReadOnly>
  <FormLabel>Username</FormLabel>
  <Input value="example_user" />
</FormControl>
```
isRequired и isInvalid вместе Комбинация этих свойств позволяет одновременно обозначить обязательность поля и отобразить ошибки при валидации.

Взаимодействие с другими компонентами

FormLabel Компонент для подписи поля. Автоматически получает стили от FormControl при использовании isRequired или isDisabled.
FormErrorMessage Выводит сообщение об ошибке только если FormControl имеет isInvalid={true}. Позволяет централизованно управлять состоянием ошибок.
FormHelperText Отображает подсказку для поля. Используется для помощи пользователю при заполнении формы, например, пояснение формата email.

<FormControl isRequired isInvalid={hasError}>
  <FormLabel>Email</FormLabel>
  <Input type="email" />
  <FormHelperText>Введите корректный email</FormHelperText>
  <FormErrorMessage>Неверный формат email</FormErrorMessage>
</FormControl>

Стилизация и кастомизация

FormControl наследует стили Chakra UI и позволяет использовать системные свойства (sx, mt, mb, color, fontSize). Кроме того, компоненты внутри FormControl могут использовать тему Chakra для единообразного внешнего вида.

<FormControl mb={4}>
  <FormLabel fontSize="lg" color="blue.600">Имя</FormLabel>
  <Input placeholder="Введите имя" />
</FormControl>

Группировка элементов формы

FormControl может содержать несколько элементов, однако рекомендуется, чтобы каждый логически связанный input имел отдельный FormControl. Это упрощает управление ошибками и состояниями.

<FormControl isRequired>
  <FormLabel>Пароль</FormLabel>
  <Input type="password" />
</FormControl>

<FormControl isRequired>
  <FormLabel>Подтверждение пароля</FormLabel>
  <Input type="password" />
  <FormErrorMessage>Пароли не совпадают</FormErrorMessage>
</FormControl>

Интеграция с валидацией

FormControl отлично сочетается с библиотеками валидации, например react-hook-form или Formik. Основная идея — управлять состоянием isInvalid на основе ошибок, возвращаемых формой.

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

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

<FormControl isInvalid={errors.email}>
  <FormLabel>Email</FormLabel>
  <Input {...register("email", { required: "Email обязателен" })} />
  <FormErrorMessage>{errors.email && errors.email.message}</FormErrorMessage>
</FormControl>

Ключевые преимущества FormControl

Централизованное управление состоянием полей (ошибка, обязательность, disabled, readonly).
Автоматическая синхронизация стилей с FormLabel, FormErrorMessage, FormHelperText.
Удобная интеграция с внешними библиотеками валидации.
Поддержка системных стилей Chakra UI для быстрой кастомизации.