Campo de texto

Componentes

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.

Vista Previa

Figma

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.

Cuándo 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.

Cuándo 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

Visualización del componente campo de texto

Solo texto

Visualización del componente campo de texto con icono

Texto + Icono

Visualización del componente campo de texto con botón

Texto + Botón

Visualización del componente campo de texto con icono y botón

Texto + Icono + Botón

Estados

Visualización del componente campo de texto en estado por defecto

Default

Visualización del componente campo de texto en estado enfocado

Focus

Visualización del componente campo de texto en estado rellenado

Filled

Error

Visualización del componente campo de texto en estado satisfactorio

Success

Visualización del componente campo de texto en estado deshabilitado

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.