Input и Textarea

В SvelteKit UI библиотеках компоненты ввода текста — Input и Textarea — играют ключевую роль в создании интерактивных форм. Их использование выходит за рамки стандартных HTML-элементов благодаря интеграции с реактивностью Svelte, валидацией и расширяемым API для стилизации и функциональности.

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

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

  • type — определяет тип поля: "text", "email", "password", "number", "tel" и другие. Правильная установка типа влияет на встроенную валидацию браузера и виртуальную клавиатуру на мобильных устройствах.
  • value — двусторонняя привязка к реактивной переменной Svelte. Используется через bind:value.
  • placeholder — текст-подсказка, отображаемый при пустом поле.
  • disabled — блокирует редактирование поля.
  • readonly — делает поле доступным для чтения, но без возможности изменения.
  • required — обязательное поле для формы.
  • maxlength и minlength — ограничение длины вводимого текста.
  • pattern — регулярное выражение для валидации формата ввода.

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

<script>
  let username = '';
</script>

<Input 
  type="text" 
  placeholder="Введите имя пользователя" 
  bind:value={username} 
/>
<p>Текущий ввод: {username}</p>

Свойства и особенности Textarea

Textarea применяется для ввода многострочного текста. Ключевые свойства:

  • rows и cols — определяют начальный размер поля.
  • resize — управление возможностью изменения размера пользователем ("none", "both", "vertical", "horizontal").
  • wrap — указывает перенос строк ("soft" или "hard").
  • maxlength — ограничение на количество символов.
  • placeholder, disabled, readonly, required — аналогично Input.
  • bind:value — двусторонняя реактивная привязка.

Пример Textarea с автоизменением размера по содержимому:

<script>
  import { onMount } from 'svelte';
  let comment = '';

  let textareaElement;

  const adjustHeight = () => {
    textareaElement.style.height = 'auto';
    textareaElement.style.height = textareaElement.scrollHeight + 'px';
  };

  $: adjustHeight();
</script>

<Textarea 
  bind:this={textareaElement} 
  bind:value={comment} 
  placeholder="Введите комментарий" 
  rows="3"
/>
<p>Длина текста: {comment.length} символов</p>

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

Большинство SvelteKit UI библиотек предоставляют встроенные стили и возможность кастомизации через классы или пропсы:

  • class — добавление пользовательских CSS-классов.
  • variant — переключение между предустановленными стилями, например "outlined", "filled".
  • size — управление размерами: "sm", "md", "lg".
  • error — визуальное отображение состояния ошибки, обычно в сочетании с валидацией.

Пример стилизации Input с состоянием ошибки:

<Input 
  type="email" 
  bind:value={email} 
  placeholder="Email" 
  class:error={email && !email.includes('@')}
/>
{#if email && !email.includes('@')}
  <span class="error-message">Некорректный email</span>
{/if}

Валидация и реактивность

SvelteKit UI библиотеки позволяют интегрировать валидацию непосредственно в компонент:

  • события: on:input, on:change, on:blur для отслеживания действий пользователя.
  • реактивные выражения $: для автоматического обновления состояния формы.
  • поддержка библиотек валидации: Yup, Zod и другие, интегрируемые с Input и Textarea через bind:value и кастомные функции.

Пример простой реактивной валидации:

<script>
  let password = '';
  $: isValid = password.length >= 8;
</script>

<Input 
  type="password" 
  bind:value={password} 
  placeholder="Пароль"
/>
<p class:is-invalid={!isValid}>Пароль должен содержать минимум 8 символов</p>

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

Input и Textarea легко интегрируются с <form> и механикой отправки данных:

  • preventDefault для кастомной обработки submit.
  • bind:form для автоматической привязки данных к объекту.
  • Поддержка асинхронной отправки и отображения состояния загрузки.

Пример отправки формы:

<script>
  let formData = { username: '', comment: '' };

  const handleSubmit = (event) => {
    event.preventDefault();
    console.log('Отправка данных:', formData);
  };
</script>

<form on:submit={handleSubmit}>
  <Input type="text" placeholder="Имя" bind:value={formData.username}/>
  <Textarea placeholder="Комментарий" bind:value={formData.comment}/>
  <button type="submit">Отправить</button>
</form>

Расширяемость компонентов

SvelteKit UI библиотеки обеспечивают возможность создания обёрток и кастомных компонентов на основе Input и Textarea:

  • Добавление иконок внутри поля.
  • Комбинация с компонентами автодополнения.
  • Реализация масок ввода для номеров телефона, кредитных карт и дат.
  • Поддержка состояния загрузки или подсказок.

Пример с иконкой внутри Input:

<div class="input-with-icon">
  <Input type="text" placeholder="Поиск" bind:value={query}/>
  <span class="icon-search"></span>
</div>

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

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

Оглавление