Campo de entrada

Entrada de contenido manual con validación; admite controlado / no controlado, límite de caracteres, borrado, multilínea de altura automática, etc.

Uso básico

Entrada controlada

Valor actual: (vacío)

import { useState } from 'react'
import { LhInput } from '@lh-ui/react'

export default function Demo() {
  const [value, setValue] = useState('')

  return <LhInput value={value} onChange={(val) => setValue(val)} placeholder="Campo de entrada controlado" />
}

Funcionalidades

Borrado / límite de caracteres / contraseña / multilínea automática

0/10

import { LhInput } from '@lh-ui/react'

export default function Demo() {
  return (
    <>
      <LhInput placeholder="Borrable" clearable />
      <LhInput placeholder="Límite de caracteres" maxlength={10} showWordLimit />
      <LhInput placeholder="Contraseña" type="password" />
      <LhInput
        placeholder="Entrada multilínea"
        type="textarea"
        autosize={{ minRows: 2, maxRows: 4 }}
      />
    </>
  )
}

Input Props

Prop	Descripción	Tipo	Valores permitidos	Predeterminado
value	Valor controlado	string	—	—
defaultValue	Valor por defecto no controlado	string	—	—
type	Tipo nativo	'text' | 'password' | 'number' | 'email' | 'tel' | 'url' | 'search' | 'textarea' | ...	—	'text'
placeholder	Marcador de posición	string	—	Respaldo del paquete de idioma (zh-CN: 请输入)
disabled	Desactivado	boolean	—	false
readonly	Solo lectura	boolean	—	false
maxlength	Longitud máxima de entrada (se trunca al superarse)	number	—	—
showWordLimit	Muestra el recuento de caracteres	boolean	—	false
clearable	Borrable	boolean	—	false
showPassword	Mostrar / ocultar contraseña (si type es password, el sufijo renderiza un botón con un ojo; novedad de React)	boolean	—	false
autosize	Altura automática multilínea	boolean | { minRows?: number; maxRows?: number }	—	false
label	Etiqueta flotante	string	—	—
prefixIcon / suffixIcon	Iconos de prefijo / sufijo	LhIconName	—	—
size	Tamaño	'large' | 'middle' | 'small'	—	Sigue ConfigProvider
name	Atributo name nativo	string	—	—
themeVars	Variables de tema a nivel de componente	Record<string, string>	—	—
sx	Props rápidas de layout	SxProps	—	—

Eventos de Input

Evento	Descripción	Firma del callback	Equivalente en Vue
onChange	Cambio del valor (dos parámetros)	(value: string, event: ChangeEvent) => void	@change
onInput	Evento de entrada nativo	(event: InputEvent) => void	@input
onFocus	Recibe el foco	(event: FocusEvent) => void	@focus
onBlur	Pierde el foco	(event: FocusEvent) => void	@blur
onClear	Clic en el botón de borrado	(event: MouseEvent) => void	@clear
onKeyDown	Evento de teclado nativo	(event: KeyboardEvent) => void	@keydown

Los dos parámetros de onChange

onChange(value, event) es isomorfo respecto al emit('change', [val, e]) de lh-ui-plus, lo que facilita la migración. Consulta la Guía de migración.

ref

forwardRef<HTMLInputElement | HTMLTextAreaElement>: el elemento nativo enfocable.

Estilos

import '@lh-ui/react/style/input'