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