Textfields

Textfield — это базовый компонент для ввода текстовой информации, используемый во всех современных интерфейсах. В SvelteKit UI Libs текстовые поля строятся на реактивной модели Svelte, что позволяет управлять их состоянием через биндинги и события.

<script>
  import { Textfield } from 'sveltekit-ui';
  let name = '';
</script>

<Textfield bind:value={name} label="Имя пользователя" placeholder="Введите имя" />
<p>Вы ввели: {name}</p>

Ключевые моменты:

  • bind:value обеспечивает двустороннюю реактивную привязку.
  • label задает отображаемую надпись.
  • placeholder показывает подсказку внутри поля ввода.

Управление состояниями

Textfields поддерживают различные состояния, которые помогают управлять пользовательским взаимодействием:

  • disabled — блокирует поле для редактирования.
  • readonly — поле доступно для просмотра, но редактировать его нельзя.
  • error — отображает визуальное состояние ошибки с текстом подсказки.
<Textfield 
  bind:value={email} 
  label="Email" 
  placeholder="Введите email" 
  error={email && !email.includes('@') ? "Некорректный email" : ""} 
/>
  • error принимает строку, если она не пустая — поле визуально подсвечивается и отображает текст ошибки.

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

Textfield интегрируется с событиями Svelte:

  • on:input — срабатывает при изменении значения.
  • on:focus и on:blur — события фокусировки.
  • on:change — вызывается после изменения и ухода фокуса.

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

<script>
  let password = '';
  let passwordError = '';

  function validate() {
    passwordError = password.length < 8 ? 'Пароль слишком короткий' : '';
  }
</script>

<Textfield 
  bind:value={password} 
  label="Пароль" 
  type="password" 
  on:blur={validate} 
  error={passwordError} 
/>
  • type="password" автоматически скрывает вводимые символы.
  • Валидация может выполняться как на input, так и на blur.

Стилизация и кастомизация

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

  • variant — задает стиль поля (filled, outlined, standard).
  • size — контролирует размер (small, medium, large).
  • leadingIcon / trailingIcon — добавление иконок перед или после поля ввода.
  • helperText — дополнительная подсказка под полем.

Пример с кастомизацией:

<Textfield 
  bind:value={search} 
  label="Поиск" 
  placeholder="Введите запрос" 
  variant="outlined" 
  size="medium" 
  helperText="Поиск по базе данных" 
/>
  • variant="outlined" обводит поле рамкой.
  • helperText помогает пользователю понять назначение поля.

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

Textfields позволяют управлять фокусом через autofocus и refs:

<Textfield bind:this={inputRef} label="Username" autofocus />
<script>
  let inputRef;
  function focusInput() {
    inputRef.focus();
  }
</script>
<button on:click={focusInput}>Фокус на поле</button>
  • bind:this предоставляет ссылку на DOM-элемент.
  • autofocus автоматически устанавливает курсор при рендере.

Поддержка масок и форматов

Для ввода телефонных номеров, дат или валют можно применять маски:

<Textfield 
  bind:value={phone} 
  label="Телефон" 
  placeholder="+7 (___) ___-__-__" 
  on:input={() => phone = formatPhone(phone)} 
/>
<script>
  function formatPhone(value) {
    return value.replace(/\D/g, '').replace(/(\d{1,1})(\d{3})(\d{3})(\d{2})(\d{2})/, '+$1 ($2) $3-$4-$5');
  }
</script>
  • Маска обновляет значение динамически.
  • Можно подключать сторонние библиотеки форматирования или валидаторы.

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

Textfields легко интегрируются с формами SvelteKit, поддерживая реактивные биндинги и валидацию через сторонние библиотеки (svelte-forms-lib, felte):

<script>
  import { createForm } from 'felte';
  let initialValues = { username: '', email: '' };
  const { form, data, errors } = createForm({ initialValues });
</script>

<form use:form>
  <Textfield bind:value={data.username} label="Имя пользователя" error={errors.username} />
  <Textfield bind:value={data.email} label="Email" error={errors.email} />
  <button type="submit">Отправить</button>
</form>
  • errors автоматически связываются с полями.
  • bind:value обеспечивает синхронизацию формы с состоянием компонентов.

Textfields в SvelteKit UI Libs обеспечивают гибкость, мощные возможности кастомизации, реактивное управление состояниями и легкую интеграцию с формами, делая их основным инструментом для работы с вводом данных в современных веб-приложениях.

Оглавление