TextInput и базовый ввод текста

Основы компонента TextInput

TextInput в Carbon Components Svelte представляет собой базовый компонент для ввода текста с расширенными возможностями кастомизации и интеграции с другими элементами интерфейса. Он поддерживает реактивное связывание данных, контроль ошибок, отображение подсказок и надписей, а также различные состояния (disabled, read-only, invalid).

<script>
  import { TextInput } from 'carbon-components-svelte';
  let value = '';
</script>

<TextInput
  bind:value
  labelText="Введите имя"
  placeholder="Имя пользователя"
/>

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

  • bind:value — реактивная привязка значения.
  • labelText — текст, отображаемый над полем ввода.
  • placeholder — текст подсказки внутри поля.
  • Компонент автоматически обрабатывает стили и взаимодействие с клавиатурой.

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

TextInput поддерживает несколько состояний:

  1. Disabled
<TextInput
  labelText="Отключённое поле"
  placeholder="Невозможно вводить"
  disabled
/>
  1. Read-only
<TextInput
  labelText="Только для чтения"
  value="Статическое значение"
  readonly
/>
  1. Invalid
<TextInput
  bind:value
  labelText="Электронная почта"
  placeholder="Введите email"
  invalid={value && !value.includes('@')}
  invalidText="Неверный формат email"
/>

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

  • disabled блокирует все взаимодействия.
  • readonly позволяет видеть, но не менять значение.
  • invalid позволяет показывать сообщение об ошибке при нарушении правил валидации.

Встроенные атрибуты и свойства

TextInput имеет множество атрибутов для управления поведением и стилем:

Атрибут Описание
type Тип ввода (text, password, email, number)
id Уникальный идентификатор поля
helperText Текст подсказки под полем
light Светлая тема (для темного фона)
size Размер поля (sm, md, lg)
warn Отображение предупреждения без блокировки ввода
warnText Текст предупреждения

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

<TextInput
  labelText="Пароль"
  type="password"
  helperText="Не менее 8 символов"
  size="lg"
/>

Реактивное взаимодействие с TextInput

Svelte позволяет напрямую связывать значение поля с переменной. Это удобно для динамической валидации и обработки данных формы.

<script>
  import { TextInput } from 'carbon-components-svelte';
  let email = '';
  $: emailValid = email.includes('@');
</script>

<TextInput
  bind:value={email}
  labelText="Email"
  placeholder="user@example.com"
  invalid={!emailValid && email.length > 0}
  invalidText="Введите корректный email"
/>

Пояснение:

  • $: создаёт реактивное вычисление состояния emailValid.
  • Ошибка отображается автоматически при несоответствии формату.

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

TextInput интегрируется с системами дизайна Carbon, позволяя использовать темы и модификаторы:

  • class — добавление пользовательских CSS классов.
  • style — inline-стили для точечной кастомизации.
  • light — адаптация к тёмным фонам интерфейса.

Пример применения стилей:

<TextInput
  labelText="Пользователь"
  placeholder="Введите имя"
  class="custom-input"
  light
/>

CSS:

.custom-input input {
  border-radius: 12px;
  border-color: #0f62fe;
}

Поддержка событий

TextInput поддерживает стандартные DOM-события и Carbon-specific события:

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

Пример:

<TextInput
  bind:value
  labelText="Имя"
  on:input={(e) => console.log('Текущее значение:', e.target.value)}
/>

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

TextInput легко интегрируется в комплексные формы, поддерживая валидацию и реактивное состояние:

<script>
  import { TextInput, Button } from 'carbon-components-svelte';
  let username = '';
  let password = '';
</script>

<form on:submit|preventDefault={() => console.log({ username, password })}>
  <TextInput bind:value={username} labelText="Имя пользователя" />
  <TextInput bind:value={password} type="password" labelText="Пароль" />
  <Button type="submit">Войти</Button>
</form>

Преимущества:

  • Автоматическое управление состояниями и ошибками.
  • Полная реактивность без дополнительного кода.
  • Поддержка темизации и стандартов Carbon Design System.

TextInput в Carbon Components Svelte — универсальный и гибкий инструмент для создания текстовых полей, обеспечивающий согласованный визуальный стиль и простую интеграцию с логикой приложения. Его возможности охватывают все основные сценарии: от базового ввода до комплексной валидации и кастомизации интерфейса.

Оглавление