Campo de entrada

Entrada de texto y multilínea. Admite prefijos y sufijos, borrado, conteo de caracteres, truncado con maxlength y vinculación con la validación de formularios.

Variantes del campo de entrada

<template>
  <div class="demo-col" style="gap: 18px">
    <div class="demo-row" style="gap: 12px; flex-wrap: wrap">
      <LhInput v-model="text" placeholder="Introduce el contenido" clearable name="title" />
      <LhInput v-model="text" prefix-icon="search" suffix-icon="close" placeholder="Iconos de prefijo/sufijo" />
    </div>
    <div class="demo-row" style="gap: 12px; flex-wrap: wrap">
      <LhInput v-model="secret" type="password" placeholder="Contraseña" autocomplete="new-password" />
      <LhInput v-model="text" readonly placeholder="Solo lectura" />
      <LhInput v-model="text" disabled placeholder="Estado deshabilitado" />
    </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="Texto multilínea (rows=2)" resize="vertical" />
      <LhInput v-model="poem" type="textarea" autosize placeholder="Altura de fila adaptable" />
    </div>
    <div class="demo-row" style="gap: 12px; flex-wrap: wrap">
      <LhInput v-model="limited" :maxlength="20" show-word-limit placeholder="Conteo de caracteres" />
      <LhInput v-model="text" label="Etiqueta flotante" placeholder="Excluye a placeholder" />
    </div>
    <p class="demo-note">Valor actual: {{ text || '(vacío)' }}</p>
  </div>
</template>

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

Props

Propiedad	Descripción	Tipo	Predeterminado
v-model	Valor enlazado (model: modelValue/input)	string	—
type	Tipo de control	'text' \| 'textarea' \| 'password' \| …	'text'
size	Tamaño	'small' \| 'medium' \| 'large'	'medium'
placeholder	Texto de marcador de posición; si se omite, se usa el paquete de idioma	string	t('input.placeholder')
clearable	Mostrar el botón de borrado	boolean	false
prefixIcon / suffixIcon	Iconos de prefijo y sufijo; toman nombres de iconos de LhIcon	string	—
maxlength / minlength	Límites de longitud nativos	number	—
showWordLimit	Mostrar el conteo de caracteres (requiere maxlength)	boolean	false
autosize	Altura de fila adaptable para textarea	boolean \| {minRows,maxRows}	false
disabled / readonly	Deshabilitar / solo lectura	boolean	false
autofocus	Enfocar automáticamente al montar	boolean	false
autocomplete	Atributo autocomplete nativo	string	'off'
nativeType	Atributo type nativo (en vigor cuando type=text)	string	'text'
resize	Dirección del asa de redimensionamiento del textarea	'none' \| 'both' \| 'horizontal' \| 'vertical'	—
name / form	Atributos nativos name / form	string	—
tabindex	Atributo tabindex nativo	number \| string	—
inputStyle	Estilo en línea del elemento de entrada	Record<string, string>	—
label	Etiqueta flotante (excluye a placeholder)	string	—
themeVars / bgPattern / sx	Sobrescritura del tema	—	—

Eventos

Evento	Descripción	Parámetro de callback
input	Evento de v-model	(val, e)
change	Se dispara al cambiar el valor	—
focus	Se dispara al obtener el foco	—
blur	Se dispara al perder el foco	—
clear	Se dispara al borrar	—
keydown	Se dispara al pulsar una tecla	—

Vinculación con formularios

Colocado dentro de LhFormItem, si falla la validación el control nativo adquiere automáticamente aria-invalid="true".