Área de Texto
El área de texto es un elemento de formulario que permite la inserción de texto en varias líneas y puede contener, por defecto, un número de caracteres ilimitado.
- HTML
- JS
<form class="ulpgds-form">
<div class="ulpgcds-form__item ulpgcds-form__item--textarea">
<label for="text-area-1">Etiqueta</label>
<textarea id="text-area-1" name="text-area-1" placeholder="Ejemplo"></textarea>
</div>
</form>
Variantes
Área de texto con texto de ayuda
- HTML
- JS
<form class="ulpgcds-form">
<div class="ulpgcds-form__item ulpgcds-form__item--textarea">
<label for="text-area-4">Etiqueta</label>
<textarea id="text-area-4" placeholder="Ejemplo"></textarea>
<div class="help-text">Texto de ayuda</div>
</div>
</form> Área de texto con error
- HTML
- JS
<form class="ulpgcds-form">
<div class="ulpgcds-form__item ulpgcds-form__item--textarea">
<label for="text-area-2">Etiqueta</label>
<textarea id="text-area-2" name="text-area" placeholder="Ejemplo" required="required" aria-required="true" class="form-item__error"></textarea>
<div class="help-text">Motivo del error</div>
</div>
</form> Área de texto con contador
- HTML
- JS
<form class="ulpgcds-form">
<div class="ulpgcds-form__item ulpgcds-form__item--textarea ulpgcds-form__item--counter">
<label for="text-area-4">Etiqueta</label>
<textarea id="text-area-4" placeholder="Ejemplo" maxlength="200"></textarea>
<div class="help-text">Texto de ayuda</div>
</div>
</form> Uso del componente
Este componente suele ser empleado cuando se requiere que el usuario inserte información descriptiva que no puede ser segregada y categorizada (por ejemplo, como cuerpo de un formulario de contacto).
Su uso debe ser siempre parte de un formulario e ir acompañado de un botón que permita guardar o enviar la información insertada.
Buenas prácticas
- No emplee áreas de texto si puede limitar las opciones mediante otro tipo de campo de formulario.
- Es importante que el texto de la etiqueta (label) del área de texto sea clara sobre el propósito del mismo y evitar mensajes ambiguos que den margen a la interpretación.
- Es conveniente evitar que texto de la etiqueta este escrito en mayúsculas, esto puede dificultar la experiencia del usuario.
- Siempre que sea posible, intente alinear todos los campos de formulario en una sola columna.
- En el caso de formularios muy largos, es conveniente agrupar los elementos de formulario por contexto.
- El texto de ayuda debe estar siempre visible sólo si es necesaria dicha ayuda. Es importante no abusar de este tipo de recursos.
- Si, en un formulario, la mayoría de los campos de texto son obligatorios, es más adecuado destacar aquellos que son opcionales.
- Si se comete un error al completar un formulario, los campos que provocan dicho error deben ser fácilmente identificables y siempre acompañados de la razón del error.
Estilos CSS
Estas son las clases aplicadas a las etiquetas HTML para conseguir los diferentes estilos.
| Selector CSS | Descripción |
|---|---|
| form.ulpgcds-form | Necesario en el formulario dónde se introducen los campos de texto |
| form div.ulpgcds-form__item | Cada fila correspondiente al componente del formulario |
| form div.ulpgcds-form__item--textarea | Indica la especifidad del campo de tipo área de texto con sus características |
| form div.ulpgcds-form__item--counter | Modificación para campo de texto con contador de caracteres |
| form div.help-text | Texto de ayuda debajo del campo |
| form div input.form-item__error | Indica que ese componente tiene un error |
Diseño
En esta sección se pueden ver los aspectos que presenta el componente para las diferentes pseudoclases relativas a la interacción con el mismo. Estos estilos siguen los mismos patrones de interacción que el resto de los componentes del Design System, por lo que su modificación puede afectar a la consistencia del sistema y a la experiencia de los usuarios.
