Links

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>
脷ltima actualizaci贸n 1yr ago