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"
}) }}