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>

Tag

Textarea

Última actualización 1yr ago

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.

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.

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.

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.

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.