Inputs

Los inputs permiten capturar y editar información dentro del sistema. Su uso adecuado garantiza consistencia, claridad y una experiencia predecible para quienes interactúan con la interfaz.

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

Principios de uso

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

Deben 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 ser consistente en todos los formularios del sistema.

Anatomía completa del input

Corresponde al conjunto completo de elementos que pueden componer un input. No todos son obligatorios en cada caso:

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

Esta estructura debe ser 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. Ten cuenta las siguientes recomendaciones:

Usar un 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 el 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 ingresar la información.

Uso correcto

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

Uso incorrecto

Reemplaza al label como único identificador del campo.

Nota

Evitar el uso de placeholder, a menos que sea estrictamente necesario como ayuda contextual.

Helper text

Informativo

Explicación de helper text informativo…

Validación o error

Las validaciones y/o mensajes de error comunican de forma clara cuando un dato cumple o no cumple con las reglas establecidas.

Es fundamental:

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 correspondiente.
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 comunica 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 para los campos obligatorios (por ejemplo, un asterisco).
Marcar únicamente los campos obligatorios cuando sea necesario.
Indicar los campos opcionales solo cuando aporte claridad.

Estados del input

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

El cambio de estado debe ser 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.

Tipos de input

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.

Nota

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 que debe ingresarse. Cuando sea necesario, limita la entrada a valores numéricos.
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.

Nota

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.

Helper text de validación y error

A diferencia de otros inputs, el campo de contraseña puede incluir múltiples condiciones de validación relacionadas con requisitos de seguridad.

Por ello, los mensajes de ayuda o error pueden mostrar varios criterios simultáneamente para guiar al usuario en la creación de una contraseña válida.

Nota

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

Search

Componente utilizado para buscar información dentro de una aplicación o sistema, permitiendo al usuario ingresar palabras clave para filtrar, localizar o recuperar contenido específico de manera rápida. Generalmente se acompaña de un icono de búsqueda

Algunos ejemplos de uso

Búsqueda de usuarios en una plataforma
Filtrado de registros en tablas o listados
Localización de documentos o archivos

Ejemplo de configuración

Campo de búsqueda con label descriptivo, icono de búsqueda visible, activación de la búsqueda al presionar “Enter” o al hacer clic en el botón de búsqueda. Puede limpieza rápida del texto ingresado y actualización dinámica de resultados según la consulta.

Usar un label claro y un icono de búsqueda que indiquen qué se puede buscar.
Permitir ejecutar la búsqueda con “Enter” o un botón, mostrando resultados o feedback inmediato.
Implementar autocompletado o sugerencias cuando sea posible.
Incluir opción para limpiar el campo y manejar estados sin resultados con mensajes claros.

Uso correcto

Utilizar el input de búsqueda para localizar contenido dentro de un conjunto de datos (productos, usuarios, documentos, etc.).
Incluir placeholder descriptivo, icono de búsqueda y permitir ejecutar la acción con "Enter".
Mostrar resultados o sugerencias relevantes basados en la palabra clave ingresada.

Uso incorrecto

Usar un input de búsqueda para ingresar datos que no implican buscar, como nombres, correos o información de formularios.
No incluir un botón o icono claro para ejecutar la búsqueda.
Utilizarlo cuando lo adecuado sería un filtro, selector o input estándar.

Nota

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.

Date picker

Componente utilizado para la selección de fechas mediante una interfaz visual (calendario), permitiendo al usuario elegir un día específico o un rango de fechas.

Algunos ejemplos de uso

Fecha de nacimiento
Fecha de audiencia
Rango de fechas (inicio y fin)

Ejemplo de configuración

Campo de selección de fecha con label visible, placeholder DD/MM/AAAA, restricción de fechas (mínima y/o máxima) y mensaje de validación asociado cuando el valor no cumple las reglas establecidas.

Definir un rango de fechas válido según el contexto (ej: no permitir fechas pasadas si no aplica).
Utilizar un formato de fecha claro y consistente (ej: DD/MM/AAAA) y mostrarlo como placeholder.
Mostrar el calendario al interactuar con el campo para facilitar la selección.
Permitir entrada manual solo si se valida correctamente el formato.
Acompañar el campo con mensajes de validación claros cuando existan restricciones.

Uso correcto

El input se utiliza para seleccionar fechas específicas mediante calendario o entrada validada.
El formato de fecha es claro y consistente para el usuario.

Uso incorrecto

Se utiliza para ingresar texto libre o valores no relacionados con fechas.
No se establecen restricciones cuando el contexto lo requiere (ej: permitir fechas futuras en fecha de nacimiento).

Estados

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

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

Time picker

Componente utilizado para la selección de horas mediante una interfaz estructurada (selector de hora), permitiendo al usuario elegir una hora específica o un rango de tiempo.

Algunos ejemplos de uso

Hora de cita
Hora de entrega
Programación de recordatorios

Ejemplo de configuración

Campo de selección de hora con label y placeholder visible, formato definido (12h o 24h), restricción de rango horario y mensaje de validación asociado cuando el valor no cumple las reglas establecidas.

Definir un formato claro y consistente (12h con AM/PM o 24h).
Restringir rangos de tiempo cuando el contexto lo requiera (ej: horario laboral).
Mostrar opciones predefinidas (dropdown o scroll) para facilitar la selección.
Permitir entrada manual solo si se valida correctamente el formato.
Acompañar el campo con mensajes de validación claros en caso de error.

Uso correcto

El input se utiliza para seleccionar horas específicas mediante un selector o entrada validada.
El formato de hora es claro y consistente para el usuario.

Uso incorrecto

Se utiliza para ingresar texto libre o valores no relacionados con horas.
No se define un formato claro, generando ambigüedad (ej: 08:00 sin contexto de AM/PM).

Estados

Los estados del time picker 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 la selección de hora.
Seleccionado / Focus: el usuario está interactuando con el campo o el selector está desplegado.
Deshabilitado: no permite interacción ni selección de hora.
Error: la hora ingresada no cumple con las reglas de validación (formato incorrecto, fuera de rango, etc.).

Composiciones

Entrada de texto libre: se usa cuando el usuario debe ingresar información directamente, sin depender de una selección previa. Adecuado para datos simples como nombres, correos o identificadores.
Búsqueda directa: se usa 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.