Links

Text input

Los campos de texto son cuadros de introducción que permiten ingresar información personalizada con un teclado. Los campos de entrada aceptan varios tipos de datos y pueden imponer restricciones para garantizar que se obtenga la información necesaria.

Variantes

Dependiendo del tipo de dato que se necesite obtener, utilizamos diferentes variantes del componente:
Visual
Tipo
Descripción
text
El tipo de entrada de texto es la variación predeterminada y más común. Se muestra como un campo de texto de una sola línea. Los saltos de línea se eliminan automáticamente del valor de entrada.
password
Campo de texto donde el valor está oculto por defecto. Indicado para accesos que requieren seguridad.
email
Campo exclusivo para editar una dirección de correo electrónico. Contiene parámetros de validación para garantizar que el dato introducido es correcto.

Racional de aplicación

Normalmente este componente se encontrará en formularios donde se debe introducir información concreta, pero también puede usarse de forma aislada en filtros, paginaciones u otras necesidades que la interfaz requiera.
No debe usarse en necesidades como:
  • Cuando la entrada de texto esperada es larga. Utilizamos el componente Textarea en su lugar.
  • Para realizar búsquedas de texto. Utilizamos el componente Search Bar en ese caso.

Buenas prácticas

Uso correcto
Uso incorrecto
Acompañamos el campo de entrada con una etiqueta que especifique el contenido esperado.
Un campo de entrada sin etiqueta aporta poca información.
Aportamos información con el texto de ayuda.
No utilizamos el placeholder como única ayuda del campo.
Se debe ser explícito en los mensajes de error para ayudar a solventarlo.
Un mensaje de error genérico no aporta mucha información.

Interacción

Este componente ha sido validado para cumplir con las pautas de accesibilidad WCAG 2.1 AA, sin embargo los cambios realizados por el propietario del contenido pueden afectar el cumplimiento de la accesibilidad. Hay que asegurarse de revisar y seguir las instrucciones de esta sección cuando se actualice o se agregue contenido nuevo a este componente.
Dispositivo
Interacción
Ratón
Se puede activar un Text input haciendo clic en cualquier lugar dentro del contenedor del componente.
Teclado
Se puede utilizar el tabulador para desplazarse por los inputs de forma secuencial u ordenada.

Anatomía y variabilidad

Anatomía del componente

Letra
Elemento
Descripción
A
Etiqueta
Se aconseja que los input vayan acompañados de una etiqueta. Hay casos excepcionales en los que el contexto es suficiente (debe estar validado por experto UX) y la etiqueta puede ser prescindible.
B
Texto de ayuda
Brinda un contexto adicional o instrucciones sobre lo que se debe introducir en el campo.
C
Placeholder
Es un texto predeterminado que puede utilizarse como simulación de la información que se espera en el campo de entrada. Al introducir información, desaparece para visualizar lo que por teclado se introduce.
D
Campo de entrada
Elemento donde se introduce la información.
E
Texto de Feedback
Indica instrucciones cuando no se cumplen los requisitos del campo al ser rellenado.

Variabilidad de estados

Letra
Estado
Descripción
A
Default
Estado por defecto, el campo está disponible para insertar información.
B
Hover
Visible al posicionar el cursor del ratón encima del input.
C
Focus
Activado por ratón con click o tabulador para actuar sobre el mismo.
D
Readonly
Estado visible pero inactivo en inserción de información.
E
Disabled
Estado no disponible, normalmente atenuado visualmente.
F
Error
Comunica un error cuando no se cumplen los requisitos del campo, por lo que solicita que ajuste de nuevo la información.

Instalación

npm i --save @plural-wc/input
// or
yarn add @plural-wc/input
import { PluralInput } from '@plural-wc/input';
// or
import '@plural-wc/input/plural-input.js';

Uso

Uso básico

<plural-input label="Basic" name="basic-input" placeholder="Enter text...">
<p slot="help-text">Help text</p>
</plural-input>

Filled

<plural-input label="Filled" name="filled-input" .modelValue="${'filled'}">
<p slot="help-text">Help text</p>
</plural-input>

Disabled

<plural-input label="Disabled" disabled name="disabled-input">
<p slot="help-text">Help text</p>
</plural-input>
Última actualización 1yr ago