Input

Компонент Input в Chakra UI предназначен для работы с текстовыми полями формы. Он является расширяемым и стилизуемым компонентом, который поддерживает все стандартные HTML-атрибуты <input>, а также предоставляет дополнительные возможности для быстрого создания интерфейсов с единым стилем.

Простейший пример использования:

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

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

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

Типы полей Input

Chakra UI поддерживает различные типы input через стандартный атрибут type:

  • text – обычный текст.
  • email – для ввода email с базовой валидацией.
  • password – скрытый текст для паролей.
  • number – числовой ввод с возможностью задать min, max и step.
  • url, tel, search – специализированные типы для различных сценариев.

Пример:

<Input type="email" placeholder="example@email.com" />
<Input type="password" placeholder="Введите пароль" />
<Input type="number" min={0} max={100} step={5} />

Управляемые и неуправляемые Input

Input можно использовать как управляемый или неуправляемый компонент:

Управляемый Input:

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

function ControlledInput() {
  const [value, setValue] = useState("");

  return (
    <Input
      value={value}
      onCha nge={(e) => setValue(e.target.value)}
      placeholder="Управляемый Input"
    />
  );
}

Неуправляемый Input:

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

function UncontrolledInput() {
  return <Input defaultValue="Неуправляемый Input" />;
}

Управляемые поля дают полный контроль над состоянием и позволяют легко интегрировать в формы с валидацией, тогда как неуправляемые подходят для простых сценариев.

Стилизация Input

Chakra UI позволяет настраивать размеры, цвета, границы и тени через пропсы:

  • size – sm, md, lg.
  • variant – outline, filled, flushed, unstyled.
  • focusBorderColor – цвет границы при фокусе.
  • errorBorderColor – цвет границы при ошибке.

Пример:

<Input
  size="lg"
  variant="filled"
  placeholder="Стилизация Input"
  focusBorderColor="teal.400"
  errorBorderColor="red.500"
/>

Важные моменты:

  • size изменяет высоту поля и размер шрифта.
  • variant полностью меняет визуальный стиль поля.
  • Цветовые пропсы интегрируются с темой Chakra UI, что обеспечивает единообразие интерфейса.

Добавление элементов слева и справа

Для создания полей с иконками или текстом можно использовать компонент InputGroup вместе с InputLeftElement и InputRightElement:

import { Input, InputGroup, InputLeftElement, InputRightElement, Icon } from "@chakra-ui/react";
import { EmailIcon, ViewIcon } from "@chakra-ui/icons";

<InputGroup>
  <InputLeftElement pointerEvents="none">
    <EmailIcon color="gray.300" />
  </InputLeftElement>
  <Input placeholder="Email" />
</InputGroup>

<InputGroup size="md">
  <Input type="password" placeholder="Пароль" />
  <InputRightElement width="4.5rem">
    <Icon as={ViewIcon} />
  </InputRightElement>
</InputGroup>

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

  • pointerEvents="none" используется, чтобы элемент слева не мешал клику по полю.
  • InputRightElement может быть интерактивным, например, кнопкой для отображения пароля.

Валидация и состояния ошибок

Chakra UI интегрируется с компонентом FormControl, что позволяет легко отображать ошибки и состояния:

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

<FormControl isInvalid={true}>
  <FormLabel>Имя пользователя</FormLabel>
  <Input placeholder="Введите имя" />
  <FormErrorMessage>Имя обязательно</FormErrorMessage>
</FormControl>

Принципы работы:

  • isInvalid активирует отображение ошибки.
  • FormErrorMessage автоматически применяет стили темы для ошибки.
  • Дополнительно можно использовать isRequired для указания обязательного поля.

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

Chakra UI позволяет управлять фокусом через рефы:

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

function FocusInput() {
  const inputRef = useRef(null);

  return (
    <>
      <Input ref={inputRef} placeholder="Клик по кнопке для фокуса" />
      <Button onCl ick={() => inputRef.current.focus()}>Фокус</Button>
    </>
  );
}

Это полезно для динамических форм и интерфейсов с автокомплитом.

Многострочный ввод: Textarea

Для многострочного текста используется компонент Textarea, который наследует большинство свойств Input:

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

<Textarea placeholder="Введите многострочный текст" size="lg" />
  • Поддерживает те же варианты size, variant, focusBorderColor и errorBorderColor.
  • Может быть встроен в FormControl для валидации аналогично Input.

Итоговые рекомендации по Input

  • Использовать InputGroup для элементов с иконками или кнопками.
  • Управляемые Input предпочтительны для форм с валидацией.
  • Всегда применять стили через тему Chakra UI для единообразного дизайна.
  • Для многострочных полей использовать Textarea, для стандартного — Input с необходимыми типами и размерами.
  • Интеграция с FormControl облегчает отображение ошибок и статусов поля.

Эта структура позволяет создавать гибкие и адаптивные формы, полностью интегрированные с темой Chakra UI и обеспечивающие удобный UX.

Оглавление