Textarea

Un Área de texto permite introducir una mayor cantidad de texto que un campo de texto estándar. Puede incluir todas las opciones de validación admitidas por el componente de campo de texto.

Racional de aplicación

El Área de texto es el componente adecuado cuando se espera una gran cantidad de texto, tal vez en respuesta a una pregunta abierta, comentarios cualitativos o notas sobre alguna cuestión.

Para las entradas obligatorias, coloque un asterisco al final de la etiqueta evitando escribir la palabra obligatorio y extender la longitud de esa etiqueta.

Se puede configurar el número de filas para adecuar el Área de texto a la información que, previsiblemente, será introducida.

En caso de que el texto exceda de la caja de entrada, se activará un scroll para poder visualizar la totalidad de información introducida.

Buenas prácticas

Uso correcto	Uso incorrecto
Acompañamos el campo de entrada con una etiqueta que especifique el contenido esperado.	Sin etiqueta, el input puede quedar fuera de contexto.
Aportamos información con del 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 Área de texto haciendo clic en cualquier lugar dentro del contenedor del input.
Teclado	Se puede utilizar el tabulador para desplazarse por las Áreas de texto de forma secuencial u ordenada premeditadamente.

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 y la etiqueta puede ser prescindible.
B	Texto de ayuda	Brinda un contexto adicional o instrucciones sobre lo que se debe ingresar en el campo.
C	Placeholder	Es un texto predeterminado que puede utilizarse de ayuda o 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 ingresa 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 Área de texto está disponible para insertar información.
B	Hover	Visible al posicionar el cursor del ratón encima del la entrada de texto.
C	Focus	Activado por ratón con click o tabulador para actuar sobre él.
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/textarea
// or
yarn add @plural-wc/textarea

import { PluralTextarea } from '@plural-wc/textarea';
// or
import '@plural-wc/textarea/plural-textarea.js';

Uso

Uso básico

<plural-textarea placeholder="placeholder">
</plural-textarea>

Label

<plural-textarea placeholder="placeholder" label="Label">
</plural-textarea>

Help Text

<plural-textarea placeholder="placeholder">
  <p slot="help-text">help text</p>
</plural-textarea>

Label and help text

<plural-textarea placeholder="placeholder" label="Label">
  <p slot="help-text">help text</p>
</plural-textarea>

Rows setup

<plural-textarea placeholder="placeholder" label="4 rows" rows="4"> </plural-textarea>

<plural-textarea label="Stops growing after 4 rows" max-rows="4"></plural-textarea>

Disabled

<plural-textarea label="Disabled" disabled></plural-textarea>

Read Only

<plural-textarea label="Readonly" readOnly></plural-textarea>