Preskočiť na hlavný obsah
Oficiálna stránka SK

Doména gov.sk je oficiálna

Toto je oficiálna webová stránka orgánu verejnej moci Slovenskej republiky. Oficiálne stránky využívajú najmä doménu gov.sk. Odkazy na jednotlivé webové sídla orgánov verejnej moci nájdete na tomto odkaze.

Táto stránka je zabezpečená

Buďte pozorní a vždy sa uistite, že zdieľate informácie iba cez zabezpečenú webovú stránku verejnej správy SR. Zabezpečená stránka vždy začína https:// pred názvom domény webového sídla.

Nová verzia ID-SK Frontend nahradzuje pôvodnú verziu. Dokumentáciu staršej verzie nájdete na ID-SK Elements

  1. ID-SK frontend
  2. Character count

Character count

Character count

(open in a new window)
Code

Markup


<div class="govuk-character-count" data-module="govuk-character-count" data-maxlength="10">
  <div class="govuk-form-group">
  <label class="govuk-label" for="more-detail">
    Can you provide more detail?
  </label>
  <textarea class="govuk-textarea govuk-js-character-count " id="more-detail" name="more-detail" rows="5" aria-describedby="more-detail-info"></textarea>
</div>

  <span id="more-detail-info" class="govuk-hint govuk-character-count__message" aria-live="polite">
    You can enter up to 10 characters
  </span>
</div>

Macro

{% from "character-count/macro.njk" import govukCharacterCount %}

{{ govukCharacterCount({
  "name": "more-detail",
  "id": "more-detail",
  "maxlength": 10,
  "label": {
    "text": "Can you provide more detail?"
  }
}) }}

Character count with hint

(open in a new window)
Code

Markup


<div class="govuk-character-count" data-module="govuk-character-count" data-maxlength="10">
  <div class="govuk-form-group">
  <label class="govuk-label" for="with-hint">
    Can you provide more detail?
  </label>
  <span id="with-hint-hint" class="govuk-hint">
    Don&#39;t include personal or financial information, eg your National Insurance number or credit card details.
  </span>
  <textarea class="govuk-textarea govuk-js-character-count " id="with-hint" name="with-hint" rows="5" aria-describedby="with-hint-info with-hint-hint"></textarea>
</div>

  <span id="with-hint-info" class="govuk-hint govuk-character-count__message" aria-live="polite">
    You can enter up to 10 characters
  </span>
</div>

Macro

{% from "character-count/macro.njk" import govukCharacterCount %}

{{ govukCharacterCount({
  "name": "with-hint",
  "id": "with-hint",
  "maxlength": 10,
  "label": {
    "text": "Can you provide more detail?"
  },
  "hint": {
    "text": "Don't include personal or financial information, eg your National Insurance number or credit card details."
  }
}) }}

Character count with default value

(open in a new window)
Code

Markup


<div class="govuk-character-count" data-module="govuk-character-count" data-maxlength="100">
  <div class="govuk-form-group">
  <label class="govuk-label" for="with-default-value">
    Full address
  </label>
  <textarea class="govuk-textarea govuk-js-character-count " id="with-default-value" name="default-value" rows="5" aria-describedby="with-default-value-info">221B Baker Street
London
NW1 6XE
</textarea>
</div>

  <span id="with-default-value-info" class="govuk-hint govuk-character-count__message" aria-live="polite">
    You can enter up to 100 characters
  </span>
</div>

Macro

{% from "character-count/macro.njk" import govukCharacterCount %}

{{ govukCharacterCount({
  "id": "with-default-value",
  "name": "default-value",
  "maxlength": 100,
  "label": {
    "text": "Full address"
  },
  "value": "221B Baker Street\nLondon\nNW1 6XE\n"
}) }}

Character count with default value exceeding limit

(open in a new window)
Code

Markup


<div class="govuk-character-count" data-module="govuk-character-count" data-maxlength="10">
  <div class="govuk-form-group govuk-form-group--error">
  <label class="govuk-label" for="exceeding-characters">
    Full address
  </label>
  <span id="exceeding-characters-error" class="govuk-error-message">
  <span class="govuk-visually-hidden">Error:</span> Please do not exceed the maximum allowed limit
  </span>
  <textarea class="govuk-textarea govuk-textarea--error govuk-js-character-count  govuk-textarea--error" id="exceeding-characters" name="exceeding" rows="5" aria-describedby="exceeding-characters-info exceeding-characters-error">221B Baker Street
London
NW1 6XE
</textarea>
</div>

  <span id="exceeding-characters-info" class="govuk-hint govuk-character-count__message" aria-live="polite">
    You can enter up to 10 characters
  </span>
</div>

Macro

{% from "character-count/macro.njk" import govukCharacterCount %}

{{ govukCharacterCount({
  "id": "exceeding-characters",
  "name": "exceeding",
  "maxlength": 10,
  "value": "221B Baker Street\nLondon\nNW1 6XE\n",
  "label": {
    "text": "Full address"
  },
  "errorMessage": {
    "text": "Please do not exceed the maximum allowed limit"
  }
}) }}

Character count with custom rows

(open in a new window)
Code

Markup


<div class="govuk-character-count" data-module="govuk-character-count" data-maxlength="10">
  <div class="govuk-form-group">
  <label class="govuk-label" for="custom-rows">
    Full address
  </label>
  <textarea class="govuk-textarea govuk-js-character-count " id="custom-rows" name="custom" rows="8" aria-describedby="custom-rows-info"></textarea>
</div>

  <span id="custom-rows-info" class="govuk-hint govuk-character-count__message" aria-live="polite">
    You can enter up to 10 characters
  </span>
</div>

Macro

{% from "character-count/macro.njk" import govukCharacterCount %}

{{ govukCharacterCount({
  "id": "custom-rows",
  "name": "custom",
  "maxlength": 10,
  "label": {
    "text": "Full address"
  },
  "rows": 8
}) }}

Character count with label as page heading

(open in a new window)
Code

Markup


<div class="govuk-character-count" data-module="govuk-character-count" data-maxlength="10">
  <div class="govuk-form-group">
  <h1 class="govuk-label-wrapper"><label class="govuk-label" for="textarea-with-page-heading">
      Full address
    </label>
    </h1>
  <textarea class="govuk-textarea govuk-js-character-count " id="textarea-with-page-heading" name="address" rows="5" aria-describedby="textarea-with-page-heading-info"></textarea>
</div>

  <span id="textarea-with-page-heading-info" class="govuk-hint govuk-character-count__message" aria-live="polite">
    You can enter up to 10 characters
  </span>
</div>

Macro

{% from "character-count/macro.njk" import govukCharacterCount %}

{{ govukCharacterCount({
  "id": "textarea-with-page-heading",
  "name": "address",
  "maxlength": 10,
  "label": {
    "text": "Full address",
    "isPageHeading": true
  }
}) }}

Character count with word count

(open in a new window)
Code

Markup


<div class="govuk-character-count" data-module="govuk-character-count" data-maxwords="10">
  <div class="govuk-form-group">
  <label class="govuk-label" for="word-count">
    Full address
  </label>
  <textarea class="govuk-textarea govuk-js-character-count " id="word-count" name="word-count" rows="5" aria-describedby="word-count-info"></textarea>
</div>

  <span id="word-count-info" class="govuk-hint govuk-character-count__message" aria-live="polite">
    You can enter up to 10 words
  </span>
</div>

Macro

{% from "character-count/macro.njk" import govukCharacterCount %}

{{ govukCharacterCount({
  "id": "word-count",
  "name": "word-count",
  "maxwords": 10,
  "label": {
    "text": "Full address"
  }
}) }}

Character count with threshold

(open in a new window)
Code

Markup


<div class="govuk-character-count" data-module="govuk-character-count" data-maxlength="10" data-threshold="75">
  <div class="govuk-form-group">
  <label class="govuk-label" for="with-threshold">
    Full address
  </label>
  <textarea class="govuk-textarea govuk-js-character-count " id="with-threshold" name="with-threshold" rows="5" aria-describedby="with-threshold-info"></textarea>
</div>

  <span id="with-threshold-info" class="govuk-hint govuk-character-count__message" aria-live="polite">
    You can enter up to 10 characters
  </span>
</div>

Macro

{% from "character-count/macro.njk" import govukCharacterCount %}

{{ govukCharacterCount({
  "id": "with-threshold",
  "name": "with-threshold",
  "maxlength": 10,
  "threshold": 75,
  "label": {
    "text": "Full address"
  }
}) }}