FormLabel, FormHelperText, FormErrorMessage

FormLabel в Chakra UI используется для создания метки поля формы и обеспечивает правильную связь с элементом управления, например с Input, Select или Textarea. Ключевой особенностью является доступность: при использовании htmlFor метка связывается с соответствующим элементом по его id, что делает интерфейс удобным для экранных читалок.

import { FormLabel, Input } from "@chakra-ui/react";

<FormLabel htmlFor="email">Email</FormLabel>
<Input id="email" type="email" />
  • htmlFor – связывает метку с элементом формы.
  • colorScheme – позволяет менять цвет текста метки, например "red" или "blue".
  • fontSize, fontWeight, mb – управляют размером, жирностью и отступом метки.

Chakra UI автоматически наследует стили из темы, что упрощает консистентное оформление всех форм. Для более сложных случаев можно использовать isRequired, чтобы визуально обозначить обязательные поля:

<FormLabel htmlFor="username" isRequired>
  Username
</FormLabel>
<Input id="username" />

FormHelperText

FormHelperText применяется для отображения дополнительной информации под полем формы. Обычно используется для подсказок, объяснений формата ввода или рекомендаций.

import { FormHelperText, Input, FormControl } from "@chakra-ui/react";

<FormControl>
  <Input id="password" type="password" />
  <FormHelperText>Пароль должен содержать минимум 8 символов.</FormHelperText>
</FormControl>

Особенности и свойства:

  • placement – по умолчанию текст выводится под полем, можно настроить через mb или mt.
  • color – позволяет выделить подсказку цветом, например "gray.500".
  • использование с FormControl – обеспечивает правильное выравнивание и доступность.

Использование FormHelperText делает формы более дружелюбными и понятными, особенно при сложных валидационных правилах.

FormErrorMessage

FormErrorMessage отображает сообщение об ошибке валидации. Работает только внутри компонента FormControl и автоматически появляется при isInvalid={true}.

import { FormControl, FormLabel, Input, FormErrorMessage } from "@chakra-ui/react";
import { useState } from "react";

function EmailField() {
  const [email, setEmail] = useState("");
  const [isError, setIsError] = useState(false);

  const validateEmail = () => {
    setIsError(!email.includes("@"));
  };

  return (
    <FormControl isInvalid={isError}>
      <FormLabel htmlFor="email">Email</FormLabel>
      <Input
        id="email"
        type="email"
        value={email}
        onCha nge={(e) => setEmail(e.target.value)}
        onB lur={validateEmail}
      />
      <FormErrorMessage>Введите корректный email</FormErrorMessage>
    </FormControl>
  );
}

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

  • isInvalid – свойство FormControl, которое активирует показ ошибки.
  • color – по умолчанию красный (red.500), но может быть переопределен через тему.
  • динамическое управление – интегрируется с формами, валидируемыми через react-hook-form или Formik.

Использование FormErrorMessage в связке с FormControl гарантирует корректное управление состоянием ошибок и визуальную консистентность.

Связка FormLabel, FormHelperText и FormErrorMessage

Эти три компонента образуют единый блок формы, обеспечивая доступность, понятность и визуальную структуру:

<FormControl isRequired isInvalid={hasError}>
  <FormLabel htmlFor="password">Пароль</FormLabel>
  <Input id="password" type="password" />
  {!hasError && (
    <FormHelperText>Пароль должен содержать минимум 8 символов</FormHelperText>
  )}
  {hasError && <FormErrorMessage>Пароль слишком короткий</FormErrorMessage>}
</FormControl>
  • FormLabel – информирует о назначении поля.
  • FormHelperText – предоставляет подсказку или инструкцию.
  • FormErrorMessage – отображает ошибки валидации.

Использование этих компонентов в связке обеспечивает правильное управление состояниями формы, улучшает доступность и упрощает поддержку стилей через тему Chakra UI.

Оглавление