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

1
npm i --save @plural-wc/textarea
2
// or
3
yarn add @plural-wc/textarea
Copied!
1
import { PluralTextarea } from '@plural-wc/textarea';
2
// or
3
import '@plural-wc/textarea/plural-textarea.js';
Copied!

Uso

Uso básico

1
<plural-textarea placeholder="placeholder">
2
</plural-textarea>
Copied!

Label

1
<plural-textarea placeholder="placeholder" label="Label">
2
</plural-textarea>
Copied!

Help Text

1
<plural-textarea placeholder="placeholder">
2
<p slot="help-text">help text</p>
3
</plural-textarea>
Copied!

Label and help text

1
<plural-textarea placeholder="placeholder" label="Label">
2
<p slot="help-text">help text</p>
3
</plural-textarea>
Copied!

Rows setup

1
<plural-textarea placeholder="placeholder" label="4 rows" rows="4"> </plural-textarea>
2
3
<plural-textarea label="Stops growing after 4 rows" max-rows="4"></plural-textarea>
Copied!

Disabled

1
<plural-textarea label="Disabled" disabled></plural-textarea>
Copied!

Read Only

1
<plural-textarea label="Readonly" readOnly></plural-textarea>
Copied!
Última actualización 8mo ago