PinInput

PinInput — это компонент библиотеки Chakra UI, предназначенный для ввода PIN-кодов или одноразовых кодов подтверждения. Он обеспечивает удобный пользовательский интерфейс с возможностью автоматического фокуса, ограничения ввода и кастомизации внешнего вида.

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

  • value — текущее значение PIN-кода. Может использоваться совместно с onChange для контроля состояния.
  • onChange — функция обратного вызова, вызываемая при изменении значения. Возвращает строку с текущим введённым кодом.
  • type — тип ввода, может быть "text" или "number". Для PIN-кодов чаще используется "number".
  • size — размер полей ввода. Поддерживаются стандартные размеры Chakra: "sm", "md", "lg".
  • isDisabled — отключает ввод всех полей.
  • isInvalid — отмечает ввод как некорректный визуально, применяя стили ошибки.
  • autoFocus — автоматически фокусирует первое поле при рендере.

Структура компонента

PinInput используется совместно с дочерним компонентом PinInputField. Например:

import { PinInput, PinInputField, HStack } from "@chakra-ui/react";

<HStack>
  <PinInput onCha nge={(value) => console.log(value)} size="lg">
    <PinInputField />
    <PinInputField />
    <PinInputField />
    <PinInputField />
  </PinInput>
</HStack>
  • HStack обеспечивает горизонтальное расположение полей.
  • Каждое поле PinInputField отвечает за одну цифру или символ.
  • Ввод автоматически переносится на следующий PinInputField.

Управляемый и неуправляемый ввод

PinInput поддерживает как управляемый, так и неуправляемый режим:

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

<PinInput>
  <PinInputField />
  <PinInputField />
  <PinInputField />
</PinInput>
  • Значение хранится внутри компонента.
  • Подходит для простых форм, где не требуется отдельное состояние.

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

const [pin, setPin] = useState("");

<PinInput value={pin} onCha nge={setPin}>
  <PinInputField />
  <PinInputField />
  <PinInputField />
  <PinInputField />
</PinInput>
  • Позволяет синхронизировать PIN с состоянием приложения.
  • Удобно для валидации и отправки на сервер.

Автоматический фокус и навигация

  • autoFocus на PinInput устанавливает фокус на первый PinInputField.
  • При вводе символа фокус автоматически переносится на следующий элемент.
  • При удалении символа с помощью Backspace фокус возвращается на предыдущий PinInputField.
  • Можно управлять фокусом вручную с помощью ref и методов focus().

Валидация и стилизация

  • isInvalid выделяет поля красным цветом для визуального сигнала ошибки.
  • Индивидуальные стили можно задавать через focusBorderColor, errorBorderColor, variant.
  • Поддерживаются темы Chakra UI, что позволяет использовать глобальные значения цвета и размера.

Пример кастомного оформления:

<PinInput size="lg" isInvalid>
  <PinInputField focusBorderColor="blue.500" errorBorderColor="red.500" />
  <PinInputField focusBorderColor="blue.500" errorBorderColor="red.500" />
  <PinInputField focusBorderColor="blue.500" errorBorderColor="red.500" />
</PinInput>

Полезные методы и события

  • onComplete — вызывается, когда все поля заполнены. Удобно для автоматической отправки кода.
  • onChange — возвращает текущее состояние кода при каждом изменении.
  • Можно комбинировать с react-hook-form или другими библиотеками управления формами для интеграции с валидацией.

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

<PinInput onCompl ete={(value) => alert(`Код введен: ${value}`)}>
  <PinInputField />
  <PinInputField />
  <PinInputField />
  <PinInputField />
</PinInput>

Кастомизация и доступность

  • Поддерживается aria-label для каждого поля.
  • Легко интегрируется с компонентами FormControl для правильной доступности.
  • Возможность использовать chakra(PinInputField) для полной кастомизации стиля, включая анимации и тени.

Резюме возможностей

  • Простая интеграция для PIN-кодов и OTP.
  • Поддержка управляемого и неуправляемого состояния.
  • Автофокус и плавная навигация между полями.
  • Полная стилизация и интеграция с темами Chakra.
  • Встроенные события onChange и onComplete для работы с данными формы.
  • Совместимость с библиотеками форм и валидацией.

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

Оглавление