Textarea

Textarea в Chakra UI представляет собой расширяемый компонент для ввода многострочного текста. Он сочетает в себе гибкость стандартного HTML <textarea> с преимуществами системы стилизации Chakra UI, включая поддержку тем, адаптивность и простую интеграцию с формами.

Базовый импорт и использование:

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

function App() {
  return (
    <Textarea placeholder="Введите текст..." />
  );
}

Ключевые свойства:

  • placeholder — отображаемый текст-заполнитель, когда поле пустое.
  • value и onChange — управление состоянием через контролируемый компонент.
  • size — размеры: "sm", "md", "lg".
  • resize — контроль возможности изменения размеров пользователем: "none", "both", "horizontal", "vertical".
  • isDisabled и isReadOnly — запрет ввода или полное отключение поля.
  • focusBorderColor — цвет рамки при фокусе, интегрированный с темой Chakra UI.

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

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

function ControlledTextarea() {
  const [text, setText] = useState("");

  return (
    <Textarea
      value={text}
      onCha nge={(e) => setText(e.target.value)}
      placeholder="Введите текст..."
      size="md"
      resize="vertical"
    />
  );
}

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

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

<Textarea
  placeholder="Введите комментарий..."
  size="lg"
  borderColor="gray.300"
  focusBorderColor="blue.500"
  bg="gray.50"
  color="black"
/>

Также доступна адаптивная стилизация через массивы и объектные синтаксисы:

<Textarea
  placeholder="Адаптивная Textarea"
  size={["sm", "md", "lg"]} // sm на мобильных, md на планшетах, lg на десктопе
  bg={{ base: "gray.100", md: "white" }}
/>

Авторазмер и управление высотой

Для автоматического увеличения высоты по мере ввода текста используется свойство minHeight, а для ограничения высоты — maxHeight. Кроме того, можно использовать библиотеку react-textarea-autosize, интегрируя её с Chakra UI:

import TextareaAutosize from 'react-textarea-autosize';
import { chakra } from "@chakra-ui/react";

const ChakraTextareaAutosize = chakra(TextareaAutosize);

<ChakraTextareaAutosize
  minRows={3}
  maxRows={10}
  placeholder="Введите длинный текст..."
/>

Валидация и интеграция с формами

Textarea отлично работает с библиотеками управления формами, такими как react-hook-form и formik. Для валидации можно использовать isInvalid и FormErrorMessage:

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

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

  return (
    <form onSub mit={handleSubmit(data => console.log(data))}>
      <FormControl isInvalid={errors.comment}>
        <FormLabel>Комментарий</FormLabel>
        <Textarea {...register("comment", { required: "Комментарий обязателен" })} />
        <FormErrorMessage>{errors.comment && errors.comment.message}</FormErrorMessage>
      </FormControl>
    </form>
  );
}

Поддержка событий и кастомных обработчиков

Textarea поддерживает стандартные события DOM:

  • onFocus — срабатывает при получении фокуса.
  • onBlur — при потере фокуса.
  • onKeyDown, onKeyUp, onInput — для отслеживания ввода.

Пример:

<Textarea
  placeholder="Нажмите Enter для отправки"
  onKeyD own={(e) => {
    if (e.key === "Enter") {
      console.log("Enter нажата");
      e.preventDefault();
    }
  }}
/>

Адаптивность и доступность

Chakra UI автоматически заботится о доступности. Textarea поддерживает:

  • ARIA-атрибуты (aria-label, aria-describedby)
  • Keyboard navigation
  • Контраст цветов и фокусные индикаторы

Добавление aria-label улучшает доступность для скринридеров:

<Textarea aria-label="Комментарий" placeholder="Введите текст..." />

Заключение по возможностям

Textarea в Chakra UI — это мощный, гибкий и полностью настраиваемый компонент. Он сочетает привычный HTML API с преимуществами реактивной стилизации, поддержкой тем, адаптивностью и интеграцией с формами. Используя его свойства и возможности темы, можно создать как простой текстовый ввод, так и сложный контролируемый редактор с автозаменой, валидацией и кастомной логикой обработки событий.

Оглавление