Pin Input

Компонент Pin Input используется для ввода коротких числовых или символьных кодов, чаще всего одноразовых паролей (OTP), PIN-кодов банковских карт или подтверждений по SMS. Основная цель — удобное разделение ввода на отдельные ячейки и обеспечение правильного фокуса при наборе.

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

В SvelteKit UI Pin Input состоит из контейнера и отдельных полей ввода. Каждый символ размещается в отдельной ячейке, что позволяет:

Автоматически переключать фокус на следующую ячейку при вводе символа.
Поддерживать корректное удаление символов с перемещением фокуса назад.
Предоставлять возможность кастомизации внешнего вида каждой ячейки.

Пример базовой разметки:

<script>
  import { PinInput, PinInputField } from 'sveltekit-ui';
  let pin = '';
</script>

<PinInput bind:value={pin} length={4}>
  <PinInputField />
  <PinInputField />
  <PinInputField />
  <PinInputField />
</PinInput>

bind:value — двустороннее связывание с переменной, содержащей текущий ввод.
length — количество символов в PIN-коде.
Каждый <PinInputField /> представляет отдельную ячейку.

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

Свойство	Тип	Описание
`value`	string	Текущее значение PIN-кода.
`length`	number	Количество полей ввода.
`type`	‘text’	‘password’	Определяет, видим ли вводимый символ или скрыт.
`placeholder`	string	Подсказка в каждой ячейке.
`autoFocus`	boolean	Автоматическая установка фокуса на первую ячейку.
`isDisabled`	boolean	Блокировка ввода.

Управление фокусом

Pin Input автоматически обрабатывает переключение фокуса. При вводе символа фокус переходит на следующую ячейку, а при удалении символа с помощью Backspace — на предыдущую.

Дополнительно можно управлять фокусом программно:

<script>
  let pinRef;
  
  function focusFirst() {
    pinRef.focus();
  }
</script>

<PinInput bind:this={pinRef} length={6}>
  {#each Array(6) as _, i}
    <PinInputField />
  {/each}
</PinInput>

<button on:click={focusFirst}>Фокус на первый символ</button>

Валидация и события

Компонент поддерживает обработку событий:

on:change — срабатывает при изменении значения.
on:complete — срабатывает, когда пользователь ввел все символы.

Пример:

<PinInput length={4} on:complete={(e) => console.log('PIN введен:', e.detail)}>
  {#each Array(4) as _, i}
    <PinInputField />
  {/each}
</PinInput>

В e.detail передается полный PIN-код, что удобно для отправки на сервер или проверки локально.

Стилизация

Каждое поле можно кастомизировать через CSS или через пропсы:

<PinInputField class="pin-cell" />

<style>
  .pin-cell {
    width: 50px;
    height: 50px;
    text-align: center;
    font-size: 1.5rem;
    border: 2px solid #ccc;
    border-radius: 8px;
    transition: border-color 0.2s;
  }
  .pin-cell:focus {
    border-color: #0070f3;
    outline: none;
  }
</style>

Также можно использовать условную стилизацию для подсветки ошибок или успешного ввода.

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

Поддерживаются основные клавиши: цифры, Backspace, Delete, стрелки для перемещения между ячейками.
На мобильных устройствах автоматически открывается числовая клавиатура при указании type="number" в <PinInputField>.

<PinInput length={6}>
  {#each Array(6) as _}
    <PinInputField type="number" inputmode="numeric" pattern="[0-9]*"/>
  {/each}
</PinInput>

Интеграция с формами

Pin Input можно интегрировать с формами SvelteKit UI и любыми библиотеками валидации, например, svelte-forms-lib. Для этого:

Использовать bind:value для синхронизации с состоянием формы.
Вешать валидацию на событие on:complete.

<script>
  import { createForm } from 'svelte-forms-lib';
  const form = createForm({
    initialValues: { otp: '' },
    validate: values => {
      const errors = {};
      if (values.otp.length < 6) errors.otp = 'Введите полный код';
      return errors;
    }
  });
</script>

<PinInput length={6} bind:value={form.values.otp} on:complete={() => form.handleSubmit()}>
  {#each Array(6) as _}
    <PinInputField />
  {/each}
</PinInput>