Gobierno de España Dintel Diseño Normalizado de Trámites Electrónicos Inicio Primeros pasos Fundamentos Componentes Módulos Plantillas Tokens Soporte

Textarea

Los textarea permiten a los usuarios ingresar texto de formato largo que abarca varias líneas.

Vista Previa

Figma
Vista previa textarea

Usos

Cuándo usar

Cuando necesite que los usuarios ingresen una cantidad de texto que sea más larga que una sola línea.

Cuándo no usar

Con preguntas abiertas difíciles de responder. Puede ser mejor dividir una pregunta compleja en una serie de preguntas simples usando Radio Buttons.

Comportamiento

Tipo de textarea

Visualización de textarea básico
Basic
Visualización de textarea con detalle
Detail
Visualización de textarea con botó
Button

Tipo de label

Visualización de textarea requerido
Requerido
Visualización de textarea no requerido
No Requerido

Estados

Visualización de textarea con texto placeholder
Placeholder
Visualización de textarea con texto completado
Filled
Visualización de textarea con foco
Focus
Visualización de textarea deshabilitado
Disabled
Visualización de textarea con mensaje de error
Error
Visualización de textarea con mensaje de éxito
Success

Accesibilidad

Este componente ha sido validado para cumplir con los requisitos de accesibilidad la UNE-EN 301549:2022 en la que se engloban los criterios de la WCAG 2.1 (AA), sin embargo, los cambios del contenido y estilos pueden afectar al cumplimiento de la accesibilidad. Debemos de asegurarnos de revisar y seguir las directrices de esta sección cuando actualice o añada nuevo contenido o estilo a este componente.

Textarea components utiliza un elemento HTML textarea básico entre bastidores y ofrece una funcionalidad y una API similares para sus usuarios. Cuenta con la propiedad label para un control accesible del componente. Tiene tabindex="0" para hacer posible acceder a él usando la tecla de tabulación o mover el foco mediante programación.