DESY

Sistema de Diseño del Gobierno de Aragón

Índice de páginas

Área de texto

Formularios

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.

Character-count

Por defecto

Descripción visual

Textarea con borde gris medio de 1px, fondo blanco, esquinas redondeadas. Label negro en peso regular ubicado arriba. Contador de caracteres "Puedes escribir hasta 250 caracteres" en gris medio debajo del campo.

Puedes escribir hasta 250 caracteres

Mostrar códigodel ejemplo: Por defecto

Contenido

Nunjucks macro
{% from "components/character-count/_macro.character-count.njk" import componentCharacterCount %}
{{ componentCharacterCount({
  "name": "more-detail-a",
  "id": "more-detail-a",
  "maxlength": 250,
  "label": {
    "text": "Esto es un label"
  }
}) }}

Placeholder

Descripción visual

Textarea con borde gris medio de 1px, fondo blanco, esquinas redondeadas. Label negro en peso regular ubicado arriba. Texto placeholder "Esto es un placeholder" en gris claro dentro del campo. Contador de caracteres "Puedes escribir hasta 250 caracteres" en gris medio debajo.

Puedes escribir hasta 250 caracteres

Mostrar códigodel ejemplo: Placeholder

Contenido

Nunjucks macro
{% from "components/character-count/_macro.character-count.njk" import componentCharacterCount %}
{{ componentCharacterCount({
  "name": "con-placeholder",
  "id": "con-placeholder",
  "maxlength": 250,
  "placeholder": "Esto es un placeholder",
  "label": {
    "text": "Esto es un label"
  }
}) }}

Deshabilitado

Descripción visual

Textarea con borde gris claro de 1px, fondo gris muy claro, esquinas redondeadas. Label negro en peso regular ubicado arriba. Contador de caracteres "Puedes escribir hasta 250 caracteres" en gris medio debajo del campo. Apariencia visual de estado inactivo sin interacción posible.

Puedes escribir hasta 250 caracteres

Mostrar códigodel ejemplo: Deshabilitado

Contenido

Nunjucks macro
{% from "components/character-count/_macro.character-count.njk" import componentCharacterCount %}
{{ componentCharacterCount({
  "name": "more-detail-b",
  "id": "more-detail-b",
  "maxlength": 250,
  "disabled": true,
  "label": {
    "text": "Esto es un label"
  }
}) }}

Con pista

Descripción visual

Textarea con borde gris de 1px, fondo blanco, esquinas redondeadas. Incluye label negro en texto normal arriba, subtexto gris debajo del label, y contador gris pequeño bajo el campo indicando caracteres disponibles (hasta 250).

Esto es una pista.

Puedes escribir hasta 250 caracteres

Mostrar códigodel ejemplo: Con pista

Contenido

Nunjucks macro
{% from "components/character-count/_macro.character-count.njk" import componentCharacterCount %}
{{ componentCharacterCount({
  "name": "with-hint",
  "id": "with-hint",
  "maxlength": 250,
  "label": {
    "text": "Esto es un label"
  },
  "hint": {
    "text": "Esto es una pista."
  }
}) }}

Con valor por defecto

Descripción visual

Textarea con borde gris de 1px, fondo blanco, esquinas redondeadas, contiene texto negro de dirección postal predefinido. Label negro en negrita arriba del campo, y contador gris pequeño bajo el textarea mostrando uso de caracteres (hasta 100).

Puedes escribir hasta 100 caracteres

Mostrar códigodel ejemplo: Con valor por defecto

Contenido

Nunjucks macro
{% from "components/character-count/_macro.character-count.njk" import componentCharacterCount %}
{{ componentCharacterCount({
  "id": "with-default-value",
  "name": "default-value",
  "maxlength": 100,
  "label": {
    "text": "Dirección completa"
  },
  "value": "Paseo María Agustín, 36,\n 50004 Zaragoza\n"
}) }}

Con valor por defecto excediendo el límite

Por accesibilidad, los mensajes de error deben incluir la palabra "error", para que no recaiga tan sólo en el color el hecho de que es un mensaje de error.

Descripción visual

Textarea con borde rojo de 2px, fondo blanco, esquinas redondeadas, contiene texto negro de dirección postal predefinido. Label negro en negrita arriba, mensaje de error rojo debajo del label, y contador rojo pequeño bajo el textarea mostrando exceso de caracteres (hasta 250).

Error:Por favor, no exceder el límite máximo. Error en el campo.

Puedes escribir hasta 250 caracteres

Mostrar códigodel ejemplo: Con valor por defecto excediendo el límite

Contenido

Nunjucks macro
{% from "components/character-count/_macro.character-count.njk" import componentCharacterCount %}
{{ componentCharacterCount({
  "id": "exceeding-characters",
  "name": "exceeding",
  "maxlength": 250,
  "value": "Paseo María Agustín, 36,\n 50004 Zaragoza\n",
  "label": {
    "text": "Dirección completa"
  },
  "errorMessage": {
    "text": "Por favor, no exceder el límite máximo. Error en el campo."
  }
}) }}

Con número de filas (rows) personalizada

Descripción visual

Textarea con borde gris de 2px, fondo blanco, altura de aproximadamente 100px. Label "Dirección completa" en negro encima del campo. Texto contador "Puedes escribir hasta 200 caracteres" en gris claro debajo del textarea, alineado a la izquierda.

Puedes escribir hasta 250 caracteres

Mostrar códigodel ejemplo: Con número de filas (rows) personalizada

Contenido

Nunjucks macro
{% from "components/character-count/_macro.character-count.njk" import componentCharacterCount %}
{{ componentCharacterCount({
  "id": "custom-rows",
  "name": "custom",
  "maxlength": 250,
  "label": {
    "text": "Dirección completa"
  },
  "rows": 8
}) }}

Con contador de palabras

Descripción visual

Textarea con borde gris de 2px, fondo blanco, altura de aproximadamente 60px. Label "Dirección completa" en negro encima del campo de entrada. Texto contador "Puedes escribir hasta 10 palabras" en gris claro debajo del textarea, alineado a la izquierda.

Puedes escribir hasta 10 palabras

Mostrar códigodel ejemplo: Con contador de palabras

Contenido

Nunjucks macro
{% from "components/character-count/_macro.character-count.njk" import componentCharacterCount %}
{{ componentCharacterCount({
  "id": "word-count",
  "name": "word-count",
  "maxwords": 10,
  "label": {
    "text": "Dirección completa"
  }
}) }}

Con threshold

Descripción visual

Textarea con borde gris de 2px, fondo blanco, altura de aproximadamente 100px. Label "Dirección completa" en negro encima del campo de entrada. Texto contador "Puedes escribir hasta 250 caracteres" en gris claro debajo del textarea, alineado a la izquierda.

Puedes escribir hasta 250 caracteres

Mostrar códigodel ejemplo: Con threshold

Contenido

Nunjucks macro
{% from "components/character-count/_macro.character-count.njk" import componentCharacterCount %}
{{ componentCharacterCount({
  "id": "with-threshold",
  "name": "with-threshold",
  "maxlength": 250,
  "threshold": 75,
  "label": {
    "text": "Dirección completa"
  }
}) }}

Con clases de css aplicadas

Inline label + character-count flexible y mensaje de error

Descripción visual

Componente con label "Intro label:" en negro arriba a la izquierda, campo de texto grande con borde rojo grueso de 2-3px y fondo blanco. Debajo aparece mensaje de error "Esto es un mensaje de error" en rojo negrita, seguido de texto secundario "Puedes escribir hasta 200 caracteres" en gris.

Error:Esto es un mensaje de error

Puedes escribir hasta 250 caracteres

Mostrar códigodel ejemplo: Con clases de css aplicadas

Contenido

Nunjucks macro
{% from "components/character-count/_macro.character-count.njk" import componentCharacterCount %}
{{ componentCharacterCount({
  "formGroup": {
    "classes": "lg:flex lg:flex-wrap lg:items-start lg:gap-x-base mb-0"
  },
  "label": {
    "text": "Inline label:",
    "classes": "lg:py-sm lg:mt-sm"
  },
  "id": "classes-applied-b",
  "name": "classes-applied-b",
  "maxlength": 250,
  "errorMessage": {
    "text": "Esto es un mensaje de error",
    "classes": "order-1 w-full pt-sm"
  },
  "classes": "lg:flex-1"
}) }}