Diseño Normalizado de Trámites Electrónicos
Inicio
Primeros pasos
Primeros pasos
¿Qué es DINTEL?
Diseñadores
Desarrolladores
Recursos
Preguntas frecuentes
Fundamentos
Fundamentos
Color
Tipografía
Elevaciones
Espaciado
Retícula
Borde
Radio
Iconografía
Ilustraciones
Animación
Accesibilidad
Tokens de diseño
Contenidos digitales
Visualización de datos
Elementos de interfaz
Elementos de interfaz
Módulos
Plantillas
Componentes
Actualizaciones
Contacto
Elementos de interfaz
Componentes
Campo de texto
Campo de texto
Los input se utilizan para solicitar una entrada de texto del usuario. Por lo general se encuentran en flujos de creación o de edición.
Texto predictivo
Al hacer click o intro sobre alguno de los items mostrados como resultados de la búsqueda predictiva, éste se escribirá en el input y accionará la búsqueda de forma automatizada.
La funcionalidad de sugerencias con texto predictivo no comenzará hasta la introducción del tercer carácter. Definición:
La búsqueda se produce al escribir al menos 3 caracteres.
El dropdown mostrará diez resultados sin barra de scroll. Si se realiza una petición que incluye más resultados solo se hará scroll hasta un máximo de 25 resultados.
Al hacer click sobre alguno de los ítems mostrados como resultados de búsqueda predictiva, éste se escribirá en el input y accionará la búsqueda de forma automatizada
Se permite la navegación sobre el dropdown mediante el uso del teclado.
Usos
Normalmente se encuentran en formularios.
Como usar
Utilizamos el input cuando solo se puede ingresar una línea de texto.
Utilizamos la variante de text area cuando se pueden necesitar varias líneas de texto.
Como no usar
Para reducir la carga cognitiva del usuario se recomienda marcar con un asterisco los campos obligatorios.
En la parte superior debemos de mencionar que los asteriscos indican campos obligatorios.
En los textos de ayuda en el detalle proporcionar un ejemplo. Utilizamos solo cuando se requiera y no se recomienda abusar de este recurso.
Incluimos una etiqueta concisa.
Comportamiento
Tipos
Solo texto
Texto + Icono
Texto + Botón
Texto + Icono + Botón
Estados
Default
Focus
Filled
Error
Success
Disabled
Accesibilidad
Este componente ha sido validado para cumplir con los requisitos de accesibilidad la UNE-EN 301549:2022 en la que se engloban los criterios de la WCAG 2.1 (AA), sin embargo, los cambios del contenido y estilos pueden afectar al cumplimiento de la accesibilidad. Debemos de asegurarnos de revisar y seguir las directrices de esta sección cuando actualice o añada nuevo contenido o estilo a este componente.
Los inputs utilizan un elemento HTML básico input detrás de escena y ofrecen una funcionalidad y una API similares para sus usuarios.
La propiedad label siempre es necesaria para un control accesible del input.
Cuando el input esta deshabilitado, la propiedad “disabled” tiene valor "true", ya que también transmite esta información correctamente a las tecnologías de asistencia.
La propiedad type se usa para adaptar el input a diferentes tareas. Según el dispositivo y el navegador, esta configuración también cambia el teclado visible en pantalla para los usuarios de dispositivos compatibles.
Cuando el input tiene la propiedad clearable establecida en true o es de tipo password, los iconos que realizan alguna acción (limpiar el campo o mostrar/ocultar contraseña) tienen role="button" y la propiedad aria-label editable.
Este sitio web utiliza cookies propias y de terceros para ofrecer un mejor servicio. Si continúa navegando consideramos que acepta su uso.
