Поле ввода

Текстовый ввод, в том числе многострочный. Поддерживает префиксы/суффиксы, очистку, подсчёт символов, усечение по maxlength и связывание с валидацией формы.

Варианты поля ввода

<template>
  <div class="demo-col" style="gap: 18px">
    <div class="demo-row" style="gap: 12px; flex-wrap: wrap">
      <LhInput v-model="text" placeholder="Введите текст" clearable name="title" />
      <LhInput v-model="text" prefix-icon="search" suffix-icon="close" placeholder="Иконки префикса/суффикса" />
    </div>
    <div class="demo-row" style="gap: 12px; flex-wrap: wrap">
      <LhInput v-model="secret" type="password" placeholder="Пароль" autocomplete="new-password" />
      <LhInput v-model="text" readonly placeholder="Только чтение" />
      <LhInput v-model="text" disabled placeholder="Отключённое состояние" />
    </div>
    <div class="demo-row" style="gap: 12px; flex-wrap: wrap; align-items: center">
      <LhInput v-model="text" size="small" placeholder="small" />
      <LhInput v-model="text" size="medium" placeholder="medium" />
      <LhInput v-model="text" size="large" placeholder="large" />
    </div>
    <div class="demo-row" style="gap: 12px; flex-wrap: wrap">
      <LhInput v-model="poem" type="textarea" :rows="2" placeholder="Многострочный текст (rows=2)" resize="vertical" />
      <LhInput v-model="poem" type="textarea" autosize placeholder="Автоматическая высота строк" />
    </div>
    <div class="demo-row" style="gap: 12px; flex-wrap: wrap">
      <LhInput v-model="limited" :maxlength="20" show-word-limit placeholder="Подсчёт символов" />
      <LhInput v-model="text" label="Плавающая метка" placeholder="Взаимоисключающе с placeholder" />
    </div>
    <p class="demo-note">Текущее значение: {{ text || '(пусто)' }}</p>
  </div>
</template>

<script>
export default {
  data: () => ({ text: '', secret: '', poem: '', limited: '' }),
}
</script>

Props

Проп	Описание	Тип	По умолчанию
v-model	Привязанное значение (model: modelValue/input)	string	—
type	Тип контрола	'text' \| 'textarea' \| 'password' \| …	'text'
size	Размер	'small' \| 'medium' \| 'large'	'medium'
placeholder	Текст-плейсхолдер; по умолчанию из языкового пакета	string	t('input.placeholder')
clearable	Показывать кнопку очистки	boolean	false
prefixIcon / suffixIcon	Иконки префикса/суффикса; имя встроенной иконки LhIcon	string	—
maxlength / minlength	Нативные ограничения длины	number	—
showWordLimit	Показывать подсчёт символов (требуется maxlength)	boolean	false
autosize	Автоматическая высота строк textarea	boolean \| {minRows,maxRows}	false
disabled / readonly	Отключение / только чтение	boolean	false
autofocus	Автофокус при монтировании	boolean	false
autocomplete	Нативный autocomplete	string	'off'
nativeType	Нативный type (действует при type=text)	string	'text'
resize	Направление маркера изменения размера textarea	'none' \| 'both' \| 'horizontal' \| 'vertical'	—
name / form	Нативные атрибуты name / form	string	—
tabindex	Нативный tabindex	number \| string	—
inputStyle	Инлайновые стили элемента ввода	Record<string, string>	—
label	Плавающая метка (взаимоисключающе с placeholder)	string	—
themeVars / bgPattern / sx	Переопределение темы	—	—

Events

Событие	Описание	Параметры обратного вызова
input	Событие v-model	(val, e)
change	Срабатывает при изменении значения	—
focus	Срабатывает при получении фокуса	—
blur	Срабатывает при потере фокуса	—
clear	Срабатывает при очистке	—
keydown	Срабатывает при нажатии клавиши	—

Связь с формой

При размещении внутри LhFormItem и ошибке валидации нативный контроль автоматически получает aria-invalid="true".