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.
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.
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. |
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. |
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. |
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. |
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';
<plural-textarea placeholder="placeholder">
</plural-textarea>
<plural-textarea placeholder="placeholder" label="Label">
</plural-textarea>
<plural-textarea placeholder="placeholder">
<p slot="help-text">help text</p>
</plural-textarea>
<plural-textarea placeholder="placeholder" label="Label">
<p slot="help-text">help text</p>
</plural-textarea>
<plural-textarea placeholder="placeholder" label="4 rows" rows="4"> </plural-textarea>
<plural-textarea label="Stops growing after 4 rows" max-rows="4"></plural-textarea>
<plural-textarea label="Disabled" disabled></plural-textarea>
<plural-textarea label="Readonly" readOnly></plural-textarea>
Última actualización 1yr ago