Campo de entrada

LhInput es un componente de campo de entrada basado en el elemento input nativo; admite entrada de texto, contraseña, recuento de caracteres y más.

Uso básico

Valor actual:

vue

<script setup lang="ts">
import { ref } from 'vue'

const value = ref('')
</script>

<template>
  <!-- Campo de entrada básico -->
  <LhInput v-model="value" placeholder="Introduce el contenido" />
</template>

vue

<script>
export default {
  data() {
    return { value: '' }
  },
}
</script>

<template>
  <!-- Campo de entrada básico -->
  <LhInput v-model="value" placeholder="Introduce el contenido" />
</template>

Diferentes tipos

vue

<script setup lang="ts">
import { ref } from 'vue'

const text = ref('')
const password = ref('')
const clearable = ref('Relleno')
</script>

<template>
  <LhInput v-model="text" placeholder="Entrada de texto" />
  <LhInput v-model="password" type="password" placeholder="Entrada de contraseña" show-password />
  <LhInput v-model="clearable" placeholder="Entrada borrable" clearable />
</template>

vue

<script>
export default {
  data() {
    return {
      text: '',
      password: '',
      clearable: 'Relleno',
    }
  },
}
</script>

<template>
  <LhInput v-model="text" placeholder="Entrada de texto" />
  <LhInput v-model="password" type="password" placeholder="Entrada de contraseña" show-password />
  <LhInput v-model="clearable" placeholder="Entrada borrable" clearable />
</template>

Estado deshabilitado

vue

<script setup lang="ts">
import { ref } from 'vue'

const value = ref('')
</script>

<template>
  <LhInput v-model="value" disabled placeholder="Campo deshabilitado" />
</template>

vue

<script>
export default {
  data() {
    return { value: '' }
  },
}
</script>

<template>
  <LhInput v-model="value" disabled placeholder="Campo deshabilitado" />
</template>

Límite de caracteres

0/10

vue

<script setup lang="ts">
import { ref } from 'vue'

const value = ref('')
</script>

<template>
  <LhInput v-model="value" :maxlength="10" show-word-limit placeholder="Máx. 10 caracteres" />
</template>

vue

<script>
export default {
  data() {
    return { value: '' }
  },
}
</script>

<template>
  <LhInput v-model="value" :maxlength="10" show-word-limit placeholder="Máx. 10 caracteres" />
</template>

Slots

vue

<script setup lang="ts">
import { ref } from 'vue'
const value = ref('')
</script>

<template>
  <LhInput v-model="value">
    <template #prefix>🔍</template>
  </LhInput>
  <LhInput v-model="value">
    <template #suffix>unit</template>
  </LhInput>
</template>

vue

<script>
export default {
  data() {
    return { value: '' }
  },
}
</script>

<template>
  <LhInput v-model="value">
    <template #prefix>🔍</template>
  </LhInput>
  <LhInput v-model="value">
    <template #suffix>unit</template>
  </LhInput>
</template>

Tema personalizado

vue

<script setup lang="ts">
import { LhConfigProvider, LhInput } from '@lh-ui/vue3'

const cerblueTheme = {
  'primary-color': '#2B4C7C',
  'primary-color-hover': '#3D649E',
  'primary-color-bg': '#E8EDF3',
  'bg-color': '#F0F4F8',
}
</script>

<template>
  <!-- Personaliza las variables del tema con theme-vars -->
  <LhConfigProvider :theme-vars="cerblueTheme">
    <LhInput placeholder="Campo de porcelana azul y blanco" />
  </LhConfigProvider>
</template>

vue

<script>
import { LhConfigProvider, LhInput } from '@lh-ui/vue3'

export default {
  data() {
    return {
      cerblueTheme: {
        'primary-color': '#2B4C7C',
        'primary-color-hover': '#3D649E',
        'primary-color-bg': '#E8EDF3',
        'bg-color': '#F0F4F8',
      },
    }
  },
}
</script>

<template>
  <!-- Personaliza las variables del tema con theme-vars -->
  <LhConfigProvider :theme-vars="cerblueTheme">
    <LhInput placeholder="Campo de porcelana azul y blanco" />
  </LhConfigProvider>
</template>

Maquetación rápida con sx

La prop sx permite ajustar rápidamente los espaciados y dimensiones sin escribir CSS adicional.

vue

<script setup lang="ts">
</script>

<template>
  <!-- Margen superior 2 -->
  <LhInput placeholder="Margen superior 2" :sx="{ mt: 2 }" />
  <!-- Margen horizontal 1, margen inferior 3 -->
  <LhInput placeholder="Margen horizontal 1, margen inferior 3" :sx="{ mx: 1, mb: 3 }" />
</template>

vue

<script>
export default {}
</script>

<template>
  <!-- Margen superior 2 -->
  <LhInput placeholder="Margen superior 2" :sx="{ mt: 2 }" />
  <!-- Margen horizontal 1, margen inferior 3 -->
  <LhInput placeholder="Margen horizontal 1, margen inferior 3" :sx="{ mx: 1, mb: 3 }" />
</template>

sx se escala sobre una base de 8px: mt: 2 → marginTop: 16px. Consulta Diseño rápido con sx para el API completo.

Internacionalización

vue

<script setup lang="ts">
import { ref, computed } from 'vue'
import { LhConfigProvider, LhInput, LhButton, zhCN, enUS } from '@lh-ui/vue3'

const locale = ref('zh-CN')
const messages = computed(() => locale.value === 'zh-CN' ? zhCN : enUS)
</script>

<template>
  <!-- Inyecta el paquete de idioma con ConfigProvider -->
  <LhConfigProvider :locale="messages">
    <LhInput />
    <LhButton @click="locale = locale === 'zh-CN' ? 'en-US' : 'zh-CN'">Cambiar idioma</LhButton>
  </LhConfigProvider>
</template>

vue

<script>
import { LhConfigProvider, LhInput, LhButton, zhCN, enUS } from '@lh-ui/vue3'

export default {
  components: { LhConfigProvider, LhInput, LhButton },
  data() {
    return { locale: 'zh-CN' }
  },
  computed: {
    messages() {
      return this.locale === 'zh-CN' ? zhCN : enUS
    },
  },
  methods: {
    toggleLocale() {
      this.locale = this.locale === 'zh-CN' ? 'en-US' : 'zh-CN'
    },
  },
}
</script>

<template>
  <!-- Inyecta el paquete de idioma con ConfigProvider -->
  <LhConfigProvider :locale="messages">
    <LhInput />
    <LhButton @click="toggleLocale">Cambiar idioma</LhButton>
  </LhConfigProvider>
</template>

Tamaño y solo lectura

vue

<script setup lang="ts">
import { ref } from 'vue'

const value = ref('')
</script>

<template>
  <LhInput v-model="value" size="small" placeholder="small" />
  <LhInput v-model="value" size="medium" placeholder="medium" />
  <LhInput v-model="value" size="large" placeholder="large" />
  <LhInput v-model="value" readonly placeholder="Campo de solo lectura" />
</template>

vue

<script>
export default {
  data() {
    return { value: '' }
  },
}
</script>

<template>
  <LhInput v-model="value" size="small" placeholder="small" />
  <LhInput v-model="value" size="medium" placeholder="medium" />
  <LhInput v-model="value" size="large" placeholder="large" />
  <LhInput v-model="value" readonly placeholder="Campo de solo lectura" />
</template>

Iconos delanteros y traseros

Las props prefix-icon / suffix-icon definen los iconos delantero y trasero; toman un nombre de icono incorporado de LhIcon (como search o date).

vue

<script setup lang="ts">
import { ref } from 'vue'

const value = ref('')
</script>

<template>
  <LhInput v-model="value" prefix-icon="search" placeholder="Icono delantero" />
  <LhInput v-model="value" suffix-icon="date" placeholder="Icono trasero" />
</template>

vue

<script>
export default {
  data() {
    return { value: '' }
  },
}
</script>

<template>
  <LhInput v-model="value" prefix-icon="search" placeholder="Icono delantero" />
  <LhInput v-model="value" suffix-icon="date" placeholder="Icono trasero" />
</template>

Atributos nativos y altura adaptativa

Atributos nativos como autocomplete, native-type, autofocus y minlength se pasan tal cual al campo interno; autosize hace que el textarea adapte su altura al contenido.

vue

<script setup lang="ts">
import { ref } from 'vue'

const value = ref('')
</script>

<template>
  <LhInput v-model="value" autocomplete="off" native-type="text" :minlength="3" placeholder="autocomplete off" />
  <LhInput v-model="value" autofocus placeholder="Autofoco" />
  <LhInput v-model="value" type="textarea" :autosize="{ minRows: 2, maxRows: 4 }" placeholder="Altura adaptativa" />
</template>

vue

<script>
export default {
  data() {
    return { value: '' }
  },
}
</script>

<template>
  <LhInput v-model="value" autocomplete="off" native-type="text" :minlength="3" placeholder="autocomplete off" />
  <LhInput v-model="value" autofocus placeholder="Autofoco" />
  <LhInput v-model="value" type="textarea" :autosize="{ minRows: 2, maxRows: 4 }" placeholder="Altura adaptativa" />
</template>

Input API

Props

Prop	Descripción	Tipo	Predeterminado
modelValue	Valor enlazado	`string`	—
type	Tipo de campo	`"number" \| "text" \| "textarea" \| "password" \| "email" \| "url" \| "tel" \| "date" \| "time"`	`'text'`
size	—	`"small" \| "medium" \| "large" \| "mini" \| "x-large"`	`'medium'`
disabled	Estado deshabilitado	`boolean`	`false`
readonly	Estado de solo lectura	`boolean`	`false`
placeholder	Texto marcador de posición	`string`	—
maxlength	Longitud máxima	`number`	—
minlength	—	`number`	—
showWordLimit	Mostrar el recuento de caracteres	`boolean`	`false`
clearable	Mostrar el botón de borrado	`boolean`	`false`
prefixIcon	Nombre del icono delantero (un nombre incorporado de LhIcon)	`LhIconName`	—
suffixIcon	Nombre del icono trasero (un nombre incorporado de LhIcon)	`LhIconName`	—
autofocus	—	`boolean`	`false`
autocomplete	—	`string`	—
nativeType	—	`string`	—
autosize	—	`boolean \| { minRows?: number; maxRows?: number; }`	`false`
resize	—	`"none" \| "both" \| "horizontal" \| "vertical"`	`'vertical'`
name	—	`string`	—
rows	—	`number`	—
tabindex	—	`string \| number`	—
form	—	`string`	—
inputStyle	—	`{ [x: string]: string; }`	—
label	—	`string`	—
themeVars	Variables de tema a nivel de componente, prevalecen sobre la configuración de ConfigProvider	`{ [x: string]: string; }`	—
bgPattern	Patrón de fondo a nivel de componente, prevalece sobre la configuración de ConfigProvider	`string`	—
sx	Props de maquetación rápida sx	`LhSxProps`	—

Eventos

Evento	Descripción	Parámetro
update:modelValue	Evento de actualización del valor	`(value: string)`
input	Evento de entrada	`(value: string)`
change	Evento de cambio de valor	`(value: string)`
focus	Evento de obtención de foco	`(event: FocusEvent)`
blur	Evento de pérdida de foco	`(event: FocusEvent)`
clear	Evento de borrado	—
keydown	Evento keydown nativo	`(event: KeyboardEvent)`

Slots

Slot	Descripción
prefix	Contenido delantero del campo
suffix	Contenido trasero del campo

Definiciones de tipos

Las estructuras de tipos TypeScript que exporta este componente son las siguientes (extraídas automáticamente de packages/components/input/src/types.ts y del código fuente de @lh-ui/share/core/*; despliega cada entrada para ver la definición completa; la descripción de los atributos está en la tabla de Props de arriba):

LhInputType

export type LhInputType = typeof LH_INPUT_TYPE_CONST[keyof typeof LH_INPUT_TYPE_CONST]

LhInputSize

/**
 * Tamaño de Input
 */
export type LhInputSize = typeof LH_SIZE_CONST[keyof typeof LH_SIZE_CONST]

LhInputState

export type LhInputState = typeof LH_INPUT_STATE_CONST[keyof typeof LH_INPUT_STATE_CONST]

LhInputProps

/**
 * Interfaz de Props de Input
 */
export interface LhInputProps {
  modelValue?: string
  type?: LhInputType
  size?: LhInputSize
  disabled?: boolean
  readonly?: boolean
  placeholder?: string
  maxlength?: number
  minlength?: number
  showWordLimit?: boolean
  clearable?: boolean
  /** Nombre del icono delantero (icono incorporado de LhIcon, p. ej. `search`) */
  prefixIcon?: LhIconName
  /** Nombre del icono trasero (icono incorporado de LhIcon, p. ej. `date`) */
  suffixIcon?: LhIconName
  autofocus?: boolean
  autocomplete?: string
  nativeType?: string
  autosize?: boolean | { minRows?: number; maxRows?: number }
  resize?: 'none' | 'both' | 'horizontal' | 'vertical'
  name?: string
  rows?: number
  tabindex?: number | string
  form?: string
  inputStyle?: Record<string, string>
  label?: string
  /** Variables de tema a nivel de componente, prevalecen sobre la configuración de ConfigProvider */
  themeVars?: Record<string, string>
  /** Patrón de fondo a nivel de componente, prevalece sobre la configuración de ConfigProvider */
  bgPattern?: string
  /** Props de maquetación rápida sx */
  sx?: LhSxProps
}

LhIconName _{(de @lh-ui/share/core/icon (svgs.ts))}

export type LhIconName = keyof typeof LH_ICON_SVGS_CONST

Campo de entrada ​

Uso básico ​

Diferentes tipos ​

Estado deshabilitado ​

Límite de caracteres ​

Slots ​

Tema personalizado ​

Maquetación rápida con sx ​

Internacionalización ​

Tamaño y solo lectura ​

Iconos delanteros y traseros ​

Atributos nativos y altura adaptativa ​

Input API ​

Props ​

Eventos ​

Slots ​

Definiciones de tipos ​

Campo de entrada

Uso básico

Diferentes tipos

Estado deshabilitado

Límite de caracteres

Slots

Tema personalizado

Maquetación rápida con sx

Internacionalización

Tamaño y solo lectura

Iconos delanteros y traseros

Atributos nativos y altura adaptativa

Input API

Props

Eventos

Slots

Definiciones de tipos