Character-count examples

Show params

Params

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

default

Puedes escribir hasta 10 caracteres

Show code

Macro

{% from "components/character-count/_macro.character-count.njk" import componentCharacterCount %}
{{ componentCharacterCount({
  "name": "more-detail-a",
  "id": "more-detail-a",
  "maxlength": 10,
  "label": {
    "text": "Label text goes here"
  }
})  }}

Markup


<!-- character-count -->
<div data-maxlength="10">
  <!-- textarea -->
<div class="c-form-group mb-0">
  <!-- label -->
  <label class="block" for="more-detail-a">Label text goes here</label>
  
  <!-- /label -->
  <textarea class="block mt-sm px-base py-sm border-black rounded font-semibold leading-normal placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base js-character-count" id="more-detail-a" name="more-detail-a" rows="5" aria-describedby="more-detail-a-info"></textarea>
</div>
<!-- /textarea -->
  <!-- hint -->
<p id="more-detail-a-info" class="block text-neutral-dark mt-xs text-sm" aria-live="polite">
  Puedes escribir hasta 10 caracteres
</p>
<!-- /hint -->
</div>
<!-- /character-count -->

placeholder

Puedes escribir hasta 10 caracteres

Show code

Macro

{% from "components/character-count/_macro.character-count.njk" import componentCharacterCount %}
{{ componentCharacterCount({
  "name": "placeholder",
  "id": "placeholder",
  "maxlength": 10,
  "placeholder": "This is a placeholder",
  "label": {
    "text": "Label text goes here"
  }
})  }}

Markup


<!-- character-count -->
<div data-maxlength="10">
  <!-- textarea -->
<div class="c-form-group mb-0">
  <!-- label -->
  <label class="block" for="placeholder">Label text goes here</label>
  
  <!-- /label -->
  <textarea class="block mt-sm px-base py-sm border-black rounded font-semibold leading-normal placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base js-character-count" id="placeholder" name="placeholder" rows="5" aria-describedby="placeholder-info" placeholder="This is a placeholder"></textarea>
</div>
<!-- /textarea -->
  <!-- hint -->
<p id="placeholder-info" class="block text-neutral-dark mt-xs text-sm" aria-live="polite">
  Puedes escribir hasta 10 caracteres
</p>
<!-- /hint -->
</div>
<!-- /character-count -->

disabled

Puedes escribir hasta 10 caracteres

Show code

Macro

{% from "components/character-count/_macro.character-count.njk" import componentCharacterCount %}
{{ componentCharacterCount({
  "name": "more-detail-b",
  "id": "more-detail-b",
  "maxlength": 10,
  "disabled": true,
  "label": {
    "text": "Label text goes here"
  }
})  }}

Markup


<!-- character-count -->
<div data-maxlength="10">
  <!-- textarea -->
<div class="c-form-group mb-0">
  <!-- label -->
  <label class="block" for="more-detail-b">Label text goes here</label>
  
  <!-- /label -->
  <textarea class="block mt-sm px-base py-sm border-black rounded font-semibold leading-normal placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base js-character-count" id="more-detail-b" name="more-detail-b" rows="5" aria-describedby="more-detail-b-info" disabled></textarea>
</div>
<!-- /textarea -->
  <!-- hint -->
<p id="more-detail-b-info" class="block text-neutral-dark mt-xs text-sm" aria-live="polite">
  Puedes escribir hasta 10 caracteres
</p>
<!-- /hint -->
</div>
<!-- /character-count -->

with hint

Hint text goes here.

Puedes escribir hasta 10 caracteres

Show code

Macro

{% from "components/character-count/_macro.character-count.njk" import componentCharacterCount %}
{{ componentCharacterCount({
  "name": "with-hint",
  "id": "with-hint",
  "maxlength": 10,
  "label": {
    "text": "Label text goes here"
  },
  "hint": {
    "text": "Hint text goes here."
  }
})  }}

Markup


<!-- character-count -->
<div data-maxlength="10">
  <!-- textarea -->
<div class="c-form-group mb-0">
  <!-- label -->
  <label class="block" for="with-hint">Label text goes here</label>
  
  <!-- /label -->
  <!-- hint -->
  <p id="with-hint-hint" class="block text-neutral-dark">
    Hint text goes here.
  </p>
  <!-- /hint -->
  <textarea class="block mt-sm px-base py-sm border-black rounded font-semibold leading-normal placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base js-character-count" id="with-hint" name="with-hint" rows="5" aria-describedby="with-hint-info with-hint-hint"></textarea>
</div>
<!-- /textarea -->
  <!-- hint -->
<p id="with-hint-info" class="block text-neutral-dark mt-xs text-sm" aria-live="polite">
  Puedes escribir hasta 10 caracteres
</p>
<!-- /hint -->
</div>
<!-- /character-count -->

with default value

Puedes escribir hasta 100 caracteres

Show code

Macro

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

Markup


<!-- character-count -->
<div data-maxlength="100">
  <!-- textarea -->
<div class="c-form-group mb-0">
  <!-- label -->
  <label class="block" for="with-default-value">Full address</label>
  
  <!-- /label -->
  <textarea class="block mt-sm px-base py-sm border-black rounded font-semibold leading-normal placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base js-character-count" id="with-default-value" name="default-value" rows="5" aria-describedby="with-default-value-info">Paseo María Agustín, 36,
 50004 Zaragoza
</textarea>
</div>
<!-- /textarea -->
  <!-- hint -->
<p id="with-default-value-info" class="block text-neutral-dark mt-xs text-sm" aria-live="polite">
  Puedes escribir hasta 100 caracteres
</p>
<!-- /hint -->
</div>
<!-- /character-count -->

with default value exceeding limit

Error: Error: Please do not exceed the maximum allowed limit

Puedes escribir hasta 10 caracteres

Show code

Macro

{% from "components/character-count/_macro.character-count.njk" import componentCharacterCount %}
{{ componentCharacterCount({
  "id": "exceeding-characters",
  "name": "exceeding",
  "maxlength": 10,
  "value": "Paseo María Agustín, 36,\n 50004 Zaragoza\n",
  "label": {
    "text": "Full address"
  },
  "errorMessage": {
    "text": "Error: Please do not exceed the maximum allowed limit"
  }
})  }}

Markup


<!-- character-count -->
<div data-maxlength="10">
  <!-- textarea -->
<div class="c-form-group c-form-group--error mb-0">
  <!-- label -->
  <label class="block" for="exceeding-characters">Full address</label>
  
  <!-- /label -->
  <!-- error-message -->
  <p id="exceeding-characters-error" class="block font-semibold text-alert-base">
  <span class="sr-only">Error:</span> Error: Please do not exceed the maximum allowed limit
  </p>
  <!-- /error-message -->
  <textarea class="block mt-sm px-base py-sm border-black rounded font-semibold leading-normal placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base js-character-count border-alert-base ring-2 ring-alert-base border-alert-base ring-2 ring-alert-base " id="exceeding-characters" name="exceeding" rows="5" aria-describedby="exceeding-characters-info exceeding-characters-error" aria-errormessage="exceeding-characters-error" aria-invalid="true">Paseo María Agustín, 36,
 50004 Zaragoza
</textarea>
</div>
<!-- /textarea -->
  <!-- hint -->
<p id="exceeding-characters-info" class="block text-neutral-dark mt-xs text-sm" aria-live="polite">
  Puedes escribir hasta 10 caracteres
</p>
<!-- /hint -->
</div>
<!-- /character-count -->

with custom rows

Puedes escribir hasta 10 caracteres

Show code

Macro

{% from "components/character-count/_macro.character-count.njk" import componentCharacterCount %}
{{ componentCharacterCount({
  "id": "custom-rows",
  "name": "custom",
  "maxlength": 10,
  "label": {
    "text": "Full address"
  },
  "rows": 8
})  }}

Markup


<!-- character-count -->
<div data-maxlength="10">
  <!-- textarea -->
<div class="c-form-group mb-0">
  <!-- label -->
  <label class="block" for="custom-rows">Full address</label>
  
  <!-- /label -->
  <textarea class="block mt-sm px-base py-sm border-black rounded font-semibold leading-normal placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base js-character-count" id="custom-rows" name="custom" rows="8" aria-describedby="custom-rows-info"></textarea>
</div>
<!-- /textarea -->
  <!-- hint -->
<p id="custom-rows-info" class="block text-neutral-dark mt-xs text-sm" aria-live="polite">
  Puedes escribir hasta 10 caracteres
</p>
<!-- /hint -->
</div>
<!-- /character-count -->

with label as page heading

Puedes escribir hasta 10 caracteres

Show code

Macro

{% from "components/character-count/_macro.character-count.njk" import componentCharacterCount %}
{{ componentCharacterCount({
  "id": "textarea-with-page-heading",
  "name": "address",
  "maxlength": 10,
  "label": {
    "text": "Full address",
    "isPageHeading": true
  }
})  }}

Markup


<!-- character-count -->
<div data-maxlength="10">
  <!-- textarea -->
<div class="c-form-group mb-0">
  <!-- label -->
      <h1 class="block "><label class="block" for="textarea-with-page-heading">Full address</label>
    </h1>
  <!-- /label -->
  <textarea class="block mt-sm px-base py-sm border-black rounded font-semibold leading-normal placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base js-character-count" id="textarea-with-page-heading" name="address" rows="5" aria-describedby="textarea-with-page-heading-info"></textarea>
</div>
<!-- /textarea -->
  <!-- hint -->
<p id="textarea-with-page-heading-info" class="block text-neutral-dark mt-xs text-sm" aria-live="polite">
  Puedes escribir hasta 10 caracteres
</p>
<!-- /hint -->
</div>
<!-- /character-count -->

with word count

Puedes escribir hasta 10 palabras

Show code

Macro

{% from "components/character-count/_macro.character-count.njk" import componentCharacterCount %}
{{ componentCharacterCount({
  "id": "word-count",
  "name": "word-count",
  "maxwords": 10,
  "label": {
    "text": "Full address"
  }
})  }}

Markup


<!-- character-count -->
<div data-maxwords="10">
  <!-- textarea -->
<div class="c-form-group mb-0">
  <!-- label -->
  <label class="block" for="word-count">Full address</label>
  
  <!-- /label -->
  <textarea class="block mt-sm px-base py-sm border-black rounded font-semibold leading-normal placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base js-character-count" id="word-count" name="word-count" rows="5" aria-describedby="word-count-info"></textarea>
</div>
<!-- /textarea -->
  <!-- hint -->
<p id="word-count-info" class="block text-neutral-dark mt-xs text-sm" aria-live="polite">
  Puedes escribir hasta 10 palabras
</p>
<!-- /hint -->
</div>
<!-- /character-count -->

with threshold

Puedes escribir hasta 10 caracteres

Show code

Macro

{% from "components/character-count/_macro.character-count.njk" import componentCharacterCount %}
{{ componentCharacterCount({
  "id": "with-threshold",
  "name": "with-threshold",
  "maxlength": 10,
  "threshold": 75,
  "label": {
    "text": "Full address"
  }
})  }}

Markup


<!-- character-count -->
<div data-maxlength="10" data-threshold="75">
  <!-- textarea -->
<div class="c-form-group mb-0">
  <!-- label -->
  <label class="block" for="with-threshold">Full address</label>
  
  <!-- /label -->
  <textarea class="block mt-sm px-base py-sm border-black rounded font-semibold leading-normal placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base js-character-count" id="with-threshold" name="with-threshold" rows="5" aria-describedby="with-threshold-info"></textarea>
</div>
<!-- /textarea -->
  <!-- hint -->
<p id="with-threshold-info" class="block text-neutral-dark mt-xs text-sm" aria-live="polite">
  Puedes escribir hasta 10 caracteres
</p>
<!-- /hint -->
</div>
<!-- /character-count -->

with custom classes applied

Inline label + flexible character-count and error message

Error: Error: Error message goes here

Puedes escribir hasta undefined caracteres

Show code

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",
  "errorMessage": {
    "text": "Error: Error message goes here",
    "classes": "order-1 w-full pt-sm"
  },
  "classes": "lg:flex-1"
})  }}

Markup


<!-- character-count -->
<div>
  <!-- textarea -->
<div class="c-form-group c-form-group--error lg:flex lg:flex-wrap lg:items-start lg:gap-x-base mb-0">
  <!-- label -->
  <label class="block lg:py-sm lg:mt-sm" for="classes-applied-b">Inline label:</label>
  
  <!-- /label -->
  <!-- error-message -->
  <p id="classes-applied-b-error" class="block font-semibold text-alert-base order-1 w-full pt-sm">
  <span class="sr-only">Error:</span> Error: Error message goes here
  </p>
  <!-- /error-message -->
  <textarea class="block mt-sm px-base py-sm border-black rounded font-semibold leading-normal placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base js-character-count border-alert-base ring-2 ring-alert-base lg:flex-1 border-alert-base ring-2 ring-alert-base " id="classes-applied-b" name="classes-applied-b" rows="5" aria-describedby="classes-applied-b-info classes-applied-b-error" aria-errormessage="classes-applied-b-error" aria-invalid="true"></textarea>
</div>
<!-- /textarea -->
  <!-- hint -->
<p id="classes-applied-b-info" class="block text-neutral-dark mt-xs text-sm" aria-live="polite">
  Puedes escribir hasta undefined caracteres
</p>
<!-- /hint -->
</div>
<!-- /character-count -->