Inputs

Los input permiten la captura y edición de información dentro del sistema. Su correcto uso garantiza consistencia, claridad y una experiencia predecible para las personas que interactúan con la interfaz.

Esta documentación define los lineamientos de uso de los inputs, tomando como referencia los componentes, con el objetivo de estandarizar su implementación y comportamiento dentro del sistema de diseño.

Principios de uso

Los input deben solicitar únicamente la información necesaria para completar una tarea específica.

Cada input debe tener un propósito claro y comprensible.
La información solicitada debe estar alineada con el contexto del flujo.
Se debe evitar la sobrecarga de campos innecesarios.

Anatomía mínima del input

Todo input debe componerse, como mínimo, de los siguientes elementos:

Label: describe de forma clara la información solicitada.
Placeholder: área donde se ingresa la información.
Helper text (opcional): ofrece orientación adicional o aclaraciones.

Esta estructura debe mantenerse consistente en todos los formularios del sistema.

Anatomía completa del input

Este es el conjunto completo de elementos que pueden componer un input, no todos son obligatorios en todos los casos:

Label icon
Optional indicator
Required indicator
Tooltip
Character limit
Right icon
Left icon

Esta estructura debe mantenerse consistente en todos los formularios del sistema.

Label

El label es el texto que identifica el campo y define qué información se debe ingresar.

Usar lenguaje simple, claro y directo para identificar el campo.
Mantener el label enfocado en qué es el dato, no en cómo ingresarlo.
Evitar instrucciones extensas o frases largas; estas deben ubicarse en helper text cuando sea necesario.
Asegurar que el label esté siempre visible y correctamente asociado a su campo.

Uso correcto

El label describe de forma clara y directa el dato esperado.
Identifica el campo sin incluir instrucciones adicionales.
Mantiene una relación clara y visible con el input correspondiente.

Uso incorrecto

El label usa textos ambiguos o genéricos que no comunican el dato esperado.
Reemplaza otros elementos del input (como helper text) que deberían cumplir esa función.

Placeholder

El placeholder es un texto opcional que sirve como apoyo visual para orientar al usuario sobre el tipo de información que debe ingresar.

Acompaña al label, sin sustituirlo.
Puede utilizarse para mostrar ejemplos de formato o contenido.
Desaparece al iniciar el ingreso de información.

Uso correcto

Acompaña al label como apoyo visual, sin reemplazarlo.
Muestra ejemplo de formato o contenido esperado.

Uso incorrecto

Reemplaza al label como único identificador del campo.

Estados del input

Los estados del input representan las diferentes condiciones del campo durante la interacción del usuario.

El cambio de estado debe ser claramente perceptible y consistente.

Activo: está habilitado para la interacción.
En foco: está seleccionado para ingreso de datos.
Deshabilitado: no permite interacción.
Error: lo ingresado no cumple con las validaciones.
Lectura: muestra información sin permitir edición.

Validaciones y mensajes de error

Las validaciones y mensajes de error comunican de forma clara y específica cuando un dato cumple o no cumple con las reglas definidas.

Mostrar el mensaje de error cerca del campo correspondiente.
Usar un lenguaje claro, descriptivo y no técnico.
Indicar cómo corregir el error siempre que sea posible.

Uso correcto

El mensaje de error aparece cerca del campo al que hace referencia.
Explica de forma clara y específica por qué el valor no es válido.
Indica qué se espera o cómo corregir el error.
Utiliza un lenguaje descriptivo y no técnico.

Uso incorrecto

El mensaje es genérico y no explica la causa del error.
No indica cómo corregir el valor ingresado.

Campos obligatorios y opcionales

Este tipo de input comunican al usuario qué información es requerida y cuál es opcional dentro del formulario.

Ejemplo de dos input obligatorios.
Ejemplo de input opcional.

Usar un indicador visual consistente (como un asterisco).
Priorizar marcar únicamente los campos obligatorios cuando sea necesario.
Indicar los campos opcionales solo cuando aporte claridad.

Casos de uso comunes

Los input se utilizan principalmente para capturar, buscar o seleccionar información, según el tipo de dato y el contexto de uso.

El tipo de input debe seleccionarse según el tipo de dato, el nivel de control requerido y la acción principal que realizará el usuario.

Selección + entrada de texto: se utiliza cuando el usuario debe elegir una opción inicial (por ejemplo, un tipo o categoría) y luego ingresar un valor relacionado. Ideal para datos que combinan selección y escritura.
Entrada de texto libre: se utiliza cuando el usuario debe ingresar información directamente, sin depender de una selección previa. Adecuado para datos simples como nombres, correos o identificadores.
Selección + búsqueda: se utiliza cuando el usuario debe seleccionar un criterio y luego buscar información asociada a ese criterio. Recomendado para flujos donde la búsqueda depende del tipo de dato seleccionado.
Búsqueda directa: se utiliza cuando el objetivo principal es buscar información, sin necesidad de una selección previa. Ideal para búsquedas rápidas o exploratorias.

Situaciones comunes de uso:

Ingreso de datos personales.
Configuración de parámetros.
Búsqueda y filtrado.
Creación y edición de información.

Inputs PrimeNG

A continuación se documentan los principales inputs del ecosistema PrimeNG. Cada componente debe utilizarse de acuerdo con su propósito y únicamente en los contextos para los que fue diseñado.

Text

Componente utilizado para la captura de textos cortos de tipo alfabético, numérico o alfanumérico.

Algunos ejemplos de uso:

Nombres y apellidos
Correos electrónicos
Identificadores y códigos

Ejemplo de configuración

Campo de texto simple con label visible, validación obligatoria y mensaje de error asociado.

Utilizar inputs de texto para información libre o semiestructurada, como nombres, comentarios o descripciones cortas.
Ajustar el tamaño y tipo de campo según la longitud esperada del contenido (una línea vs. texto extenso).
Acompañar el campo con labels y helper text claros que orienten sobre qué escribir.
Incluir validaciones y mensajes de error descriptivos cuando el contenido tenga reglas específicas.

Uso correcto

El input se utiliza para texto descriptivo o libre.
El tipo de campo coincide con la longitud y naturaleza del contenido.
La guía textual ayuda al usuario a ingresar la información esperada.

Uso incorrecto

Se utiliza un input de texto para valores estructurados o numéricos.
El campo no responde al tipo de dato ni a las reglas del contenido.

Estados

Estos inputs obedecen a los mismos estados que los input estándar.

Number

Componente utilizado para la captura de textos cortos de tipo numérico.

Algunos ejemplos de uso:

Valores monetarios
Cantidades
Porcentajes

Ejemplo de configuración

Campo numérico con label visible, validación obligatoria y mensaje de error asociado cuando el valor no cumple con las reglas definidas.

Configurar el input según el tipo de dato esperado, limitando el ingreso a valores numéricos cuando corresponda.
Definir rangos y reglas claras para evitar valores inválidos o fuera de contexto.
Acompañar el input con mensajes de validación claros, que confirmen el estado correcto o indiquen cómo corregir el error.

Uso correcto

El input está destinado a un código numérico corto.
El tipo de campo coincide con el dato esperado.
La validación confirma explícitamente que el valor es válido.

Uso incorrecto

Se utiliza un input numérico para texto libre o extenso, lo que no corresponde al tipo de dato.
El campo no responde al objetivo del contenido solicitado.

Estados

Estos inputs obedecen a los mismos estados que los input estándar.

Password

Componente utilizado para la captura de información sensible, ocultando el valor ingresado para proteger la privacidad y seguridad del usuario.

Algunos ejemplos de uso:

Contraseñas
Claves temporales
Códigos de acceso sensibles

Ejemplo de configuración

Campo de contraseña con label visible, opción para mostrar u ocultar el valor ingresado, validación obligatoria y mensaje de error asociado cuando no cumple con las reglas definidas.

Configurar el input para ocultar el valor ingresado por defecto.
Permitir mostrar u ocultar la contraseña para facilitar la verificación por parte del usuario.
Definir reglas claras de validación (longitud, complejidad) y comunicarlas de forma comprensible.
Acompañar el input con mensajes de validación claros, que indiquen el estado del valor ingresado.

Uso correcto

El input está destinado a la captura de información sensible.
El valor ingresado se mantiene oculto durante la escritura.
Las validaciones guían al usuario para cumplir con los requisitos de seguridad.

Uso incorrecto

Se utiliza un input de contraseña para información no sensible.
El valor se muestra de forma permanente sin control del usuario.

Estados

Estos inputs obedecen a los mismos estados que los input estándar.

Text area

Componente utilizado para la captura de texto extenso o descriptivo, permitiendo al usuario ingresar información en múltiples líneas.

Algunos ejemplos de uso:

Comentarios
Observaciones
Descripciones

Ejemplo de configuración

Campo de texto multilínea con label visible, placeholder opcional, límite de caracteres definido y mensaje de validación asociado cuando el contenido no cumple con las reglas establecidas.

Definir un tamaño visible adecuado según el contexto y la cantidad de texto esperada.
Establecer límites de caracteres cuando aplique.
Mostrar contador de caracteres si es relevante para el usuario.
Acompañar el campo con mensajes de validación claros cuando existan reglas específicas.

Uso correcto

El input se utiliza para texto libre o descriptivo de longitud media o extensa.
El tamaño del campo permite visualizar cómodamente el contenido ingresado.

Uso incorrecto

Se utiliza un text area para valores cortos o estructurados.
El tamaño del campo no corresponde a la cantidad de contenido esperado.

Estados

Los estados del text area representan las distintas condiciones del campo durante la interacción del usuario y comunican su disponibilidad y estado de validación.

Activo: está habilitado para el ingreso de texto.
Seleccionado: se encuentra en foco y listo para la escritura.
Deshabilitado: no permite interacción ni edición de contenido.
Error: el contenido ingresado no cumple con las reglas de validación definidas.

Calendar

Componente para la selección de fechas y rangos de fechas.

Casos de uso

Fechas de inicio o fin
Rangos temporales

Buenas prácticas

Definir formatos de fecha consistentes.
Restringir fechas no válidas.
Permitir entrada manual cuando sea necesario.

Mostrar el formato de fecha esperado.
Limitar el rango seleccionable.

Permitir fechas inconsistentes con el flujo.
Forzar únicamente la selección visual.

Estados

Activo
Seleccionado
Deshabilitado
Error

Ejemplo de configuración

Selector de fecha con formato definido, validación de rango y restricción de fechas futuras.

Tabla de referencia: Input, tipo de dato y validaciones

Componente	Tipo de dato	Validaciones comunes
InputText	Texto / Alfanumérico	Obligatorio, longitud, formato
InputNumber	Numérico	Rango mínimo y máximo, formato
Password	Texto sensible	Longitud mínima, complejidad
Textarea	Texto largo	Longitud máxima
Dropdown	Valor único	Selección obligatoria
MultiSelect	Lista de valores	Mínimo / máximo de selecciones
Calendar	Fecha / Rango	Formato válido, rango permitido

Estados globales de los inputs

Los componentes de entrada de PrimeNG pueden presentar los siguientes estados comunes:

Loading: el campo depende de información en proceso de carga.
Readonly: el valor se muestra sin permitir edición.
Disabled: el campo no permite interacción ni edición.

Estos estados deben representarse de forma visual clara y consistente en todo el sistema.

Consideraciones finales

La correcta selección e implementación de los componentes de entrada permite formularios más claros, eficientes y consistentes. Cada input debe utilizarse según su propósito, respetando estos lineamientos y validándose dentro del sistema de diseño antes de su adopción definitiva.

Básico

InputText se utiliza como una entrada controlada con la propiedad ngModel .

Etiqueta flotan

FloatLabel integra visualmente una etiqueta con su elemento de formulario. Consulte la documentación de FloatLabel para obtener más información.

Etiqueta Ifta

IftaLabel se utiliza para crear etiquetas con alineación superior en el interior del cuadro. Consulte la documentación de IftaLabel para obtener más información.

Tallas

InputText proporciona tamaños pequeños y grandes como alternativas al estándar.

Líquido

La propiedad fluida hace que el componente ocupe todo el ancho de su contenedor cuando se establece como verdadero.

Texto de ayuda

Un texto de aviso se puede definir con la etiqueta semántica pequeña .

Completado

Especifique la propiedad de variante como rellena para mostrar el componente con un énfasis visual mayor que el estilo delineado predeterminado.

Desactivado

Cuando está deshabilitado , el elemento no se puede editar ni enfocar.

Inválido

El estado no válido se aplica mediante la propiedad ⁠invalid para indicar una validación fallida, que se puede integrar con Angular Forms.

Añade aquí tu texto de cabecera

Lorem fistrum por la gloria de mi madre esse jarl aliqua llevame al sircoo. De la pradera ullamco qué dise usteer está la cosa muy malar.