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

Mostrar parámetros

Parámetros del componente

              params:
- name: id
  type: string
  required: true
  description: The id of the textarea.
- name: name
  type: string
  required: true
  description: The name of the textarea, which is submitted with the form data.
- name: rows
  type: string
  required: false
  description: Optional number of textarea rows (default is 5 rows).
- name: value
  type: string
  required: false
  description: Optional initial value of the textarea.
- name: maxlength
  type: string
  required: true
  description: If `maxwords` is set, this is not required. The maximum number of characters. If `maxwords` is provided, the `maxlength` argument will be ignored.
- name: maxwords
  type: string
  required: true
  description: If `maxlength` is set, this is not required. The maximum number of words. If `maxwords` is provided, the `maxlength` argument will be ignored.
- name: threshold
  type: string
  required: true
  description: The percentage value of the limit at which point the count message is displayed. If this attribute is set, the count message will be hidden by default.
- name: label
  type: object
  required: true
  description: Options for the label component.
  isComponent: true
- name: hint
  type: object
  required: false
  description: Options for the hint component.
  isComponent: true
- name: errorMessage
  type: object
  required: false
  description: Options for the error message component. The error message component will not display if you use a falsy value for `errorMessage`, for example `false` or `null`.
  isComponent: true
- name: placeholder
  type: string
  required: false
  description: Placeholder text
- name: disabled
  type: boolean
  required: false
  description: If true, character-count will be disabled.
- name: formGroup
  type: object
  required: false
  description: Options for the form-group wrapper
  params:
  - name: classes
    type: string
    required: false
    description: Classes to add to the form group (e.g. to show error state for the whole group)
- name: classes
  type: string
  required: false
  description: Classes to add to the textarea.
- name: attributes
  type: object
  required: false
  description: HTML attributes (for example data attributes) to add to the textarea.
- name: countMessage
  type: object
  required: false
  description: Options for the count message
  params:
  - name: classes
    type: string
    required: false
    description: Classes to add to the count message

Por defecto

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

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": "placeholder",
  "id": "placeholder",
  "maxlength": 250,
  "placeholder": "Esto es un placeholder",
  "label": {
    "text": "Esto es un label"
  }
}) }}

Deshabilitado

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

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

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

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

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": "Error: Por favor, no exceder el límite máximo"
  }
}) }}

Con número de filas (rows) personalizada

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 label como encabezado

Utiliza el parámetro "isPageheading": true para que el label esté dentro de un encabezado. Usa el parámetro "headingLevel" para establecer el nivel del encabezado. Por ejemplo: "headingLevel": 3 creará un encabezado <h3>. Si no se establece un "headingLevel", por defecto usará un <h1>.

Puedes escribir hasta 250 caracteres

Mostrar códigodel ejemplo: Con label como encabezado

Contenido

Nunjucks macro

{% from "components/character-count/_macro.character-count.njk" import componentCharacterCount %}

{{ componentCharacterCount({
  "id": "textarea-with-page-heading",
  "name": "address",
  "maxlength": 250,
  "label": {
    "text": "Esto es un label dentro de un encabezado <h1>",
    "isPageHeading": true
  }
}) }}

Con contador de palabras

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

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

Error: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": "Error: Esto es un mensaje de error",
    "classes": "order-1 w-full pt-sm"
  },
  "classes": "lg:flex-1"
}) }}