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. Textarea

Textarea

Code

Markup

<div class="govuk-form-group">
  <label class="govuk-label" for="more-detail">
    Can you provide more detail?
  </label>
  <span id="more-detail-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" id="more-detail" name="more-detail" rows="5" aria-describedby="more-detail-hint"></textarea>
</div>

Macro

{% from "textarea/macro.njk" import govukTextarea %}

{{ govukTextarea({
  "name": "more-detail",
  "id": "more-detail",
  "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."
  }
}) }}

Textarea with error message

(open in a new window)
Code

Markup

<div class="govuk-form-group govuk-form-group--error">
  <label class="govuk-label" for="no-ni-reason">
    Why can&#39;t you provide a National Insurance number?
  </label>
  <span id="no-ni-reason-error" class="govuk-error-message">
  <span class="govuk-visually-hidden">Error:</span> You must provide an explanation
  </span>
  <textarea class="govuk-textarea govuk-textarea--error" id="no-ni-reason" name="no-ni-reason" rows="5" aria-describedby="no-ni-reason-error"></textarea>
</div>

Macro

{% from "textarea/macro.njk" import govukTextarea %}

{{ govukTextarea({
  "name": "no-ni-reason",
  "id": "no-ni-reason",
  "label": {
    "text": "Why can't you provide a National Insurance number?"
  },
  "errorMessage": {
    "text": "You must provide an explanation"
  }
}) }}

Textarea with default value

(open in a new window)
Code

Markup

<div class="govuk-form-group">
  <label class="govuk-label" for="full-address">
    Full address
  </label>
  <textarea class="govuk-textarea" id="full-address" name="address" rows="5">221B Baker Street
London
NW1 6XE
</textarea>
</div>

Macro

{% from "textarea/macro.njk" import govukTextarea %}

{{ govukTextarea({
  "id": "full-address",
  "name": "address",
  "value": "221B Baker Street\nLondon\nNW1 6XE\n",
  "label": {
    "text": "Full address"
  }
}) }}

Textarea with custom rows

(open in a new window)
Code

Markup

<div class="govuk-form-group">
  <label class="govuk-label" for="full-address">
    Full address
  </label>
  <textarea class="govuk-textarea" id="full-address" name="address" rows="8"></textarea>
</div>

Macro

{% from "textarea/macro.njk" import govukTextarea %}

{{ govukTextarea({
  "id": "full-address",
  "name": "address",
  "label": {
    "text": "Full address"
  },
  "rows": 8
}) }}

Textarea with label as page heading

(open in a new window)
Code

Markup

<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" id="textarea-with-page-heading" name="address" rows="5"></textarea>
</div>

Macro

{% from "textarea/macro.njk" import govukTextarea %}

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

Textarea with optional form-group classes

(open in a new window)
Code

Markup

<div class="govuk-form-group extra-class">
  <label class="govuk-label" for="textarea-with-page-heading">
    Full address
  </label>
  <textarea class="govuk-textarea" id="textarea-with-page-heading" name="address" rows="5"></textarea>
</div>

Macro

{% from "textarea/macro.njk" import govukTextarea %}

{{ govukTextarea({
  "id": "textarea-with-page-heading",
  "name": "address",
  "label": {
    "text": "Full address"
  },
  "formGroup": {
    "classes": "extra-class"
  }
}) }}

Textarea with autocomplete attribute

(open in a new window)
Code

Markup

<div class="govuk-form-group">
  <label class="govuk-label" for="textarea-with-autocomplete-attribute">
    Full address
  </label>
  <textarea class="govuk-textarea" id="textarea-with-autocomplete-attribute" name="address" rows="5" autocomplete="street-address"></textarea>
</div>

Macro

{% from "textarea/macro.njk" import govukTextarea %}

{{ govukTextarea({
  "id": "textarea-with-autocomplete-attribute",
  "name": "address",
  "label": {
    "text": "Full address"
  },
  "autocomplete": "street-address"
}) }}