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>