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

Input

Code

Markup

<div class="govuk-form-group">
  <label class="govuk-label" for="input-example">
    National Insurance number
  </label>
  <input class="govuk-input" id="input-example" name="test-name"  type="text">
</div>

Macro

{% from "input/macro.njk" import govukInput %}

{{ govukInput({
  "label": {
    "text": "National Insurance number"
  },
  "id": "input-example",
  "name": "test-name"
}) }}

Input with hint text

(open in a new window)
Code

Markup

<div class="govuk-form-group">
  <label class="govuk-label" for="input-with-hint-text">
    National insurance number
  </label>
  <span id="input-with-hint-text-hint" class="govuk-hint">
    It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.
  </span>
  <input class="govuk-input" id="input-with-hint-text" name="test-name-2"  type="text" aria-describedby="input-with-hint-text-hint">
</div>

Macro

{% from "input/macro.njk" import govukInput %}

{{ govukInput({
  "label": {
    "text": "National insurance number"
  },
  "hint": {
    "text": "It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’."
  },
  "id": "input-with-hint-text",
  "name": "test-name-2"
}) }}

Input with error message

(open in a new window)
Code

Markup

<div class="govuk-form-group govuk-form-group--error">
  <label class="govuk-label" for="input-with-error-message">
    National Insurance number
  </label>
  <span id="input-with-error-message-hint" class="govuk-hint">
    It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.
  </span>
  <span id="input-with-error-message-error" class="govuk-error-message">
  <span class="govuk-visually-hidden">Error:</span> Error message goes here
  </span>
  <input class="govuk-input govuk-input--error" id="input-with-error-message" name="test-name-3"  type="text" aria-describedby="input-with-error-message-hint input-with-error-message-error">
</div>

Macro

{% from "input/macro.njk" import govukInput %}

{{ govukInput({
  "label": {
    "text": "National Insurance number"
  },
  "hint": {
    "text": "It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’."
  },
  "id": "input-with-error-message",
  "name": "test-name-3",
  "errorMessage": {
    "text": "Error message goes here"
  }
}) }}

Input with width-2 class

(open in a new window)
Code

Markup

<div class="govuk-form-group">
  <label class="govuk-label" for="input-width-2">
    National insurance number
  </label>
  <span id="input-width-2-hint" class="govuk-hint">
    It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.
  </span>
  <input class="govuk-input govuk-input--width-2" id="input-width-2" name="test-width-2"  type="text" aria-describedby="input-width-2-hint">
</div>

Macro

{% from "input/macro.njk" import govukInput %}

{{ govukInput({
  "label": {
    "text": "National insurance number"
  },
  "hint": {
    "text": "It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’."
  },
  "id": "input-width-2",
  "name": "test-width-2",
  "classes": "govuk-input--width-2"
}) }}

Input with width-3 class

(open in a new window)
Code

Markup

<div class="govuk-form-group">
  <label class="govuk-label" for="input-width-3">
    National insurance number
  </label>
  <span id="input-width-3-hint" class="govuk-hint">
    It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.
  </span>
  <input class="govuk-input govuk-input--width-3" id="input-width-3" name="test-width-3"  type="text" aria-describedby="input-width-3-hint">
</div>

Macro

{% from "input/macro.njk" import govukInput %}

{{ govukInput({
  "label": {
    "text": "National insurance number"
  },
  "hint": {
    "text": "It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’."
  },
  "id": "input-width-3",
  "name": "test-width-3",
  "classes": "govuk-input--width-3"
}) }}

Input with width-4 class

(open in a new window)
Code

Markup

<div class="govuk-form-group">
  <label class="govuk-label" for="input-width-4">
    National insurance number
  </label>
  <span id="input-width-4-hint" class="govuk-hint">
    It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.
  </span>
  <input class="govuk-input govuk-input--width-4" id="input-width-4" name="test-width-4"  type="text" aria-describedby="input-width-4-hint">
</div>

Macro

{% from "input/macro.njk" import govukInput %}

{{ govukInput({
  "label": {
    "text": "National insurance number"
  },
  "hint": {
    "text": "It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’."
  },
  "id": "input-width-4",
  "name": "test-width-4",
  "classes": "govuk-input--width-4"
}) }}

Input with width-5 class

(open in a new window)
Code

Markup

<div class="govuk-form-group">
  <label class="govuk-label" for="input-width-5">
    National insurance number
  </label>
  <span id="input-width-5-hint" class="govuk-hint">
    It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.
  </span>
  <input class="govuk-input govuk-input--width-5" id="input-width-5" name="test-width-5"  type="text" aria-describedby="input-width-5-hint">
</div>

Macro

{% from "input/macro.njk" import govukInput %}

{{ govukInput({
  "label": {
    "text": "National insurance number"
  },
  "hint": {
    "text": "It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’."
  },
  "id": "input-width-5",
  "name": "test-width-5",
  "classes": "govuk-input--width-5"
}) }}

Input with width-10 class

(open in a new window)
Code

Markup

<div class="govuk-form-group">
  <label class="govuk-label" for="input-width-10">
    National insurance number
  </label>
  <span id="input-width-10-hint" class="govuk-hint">
    It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.
  </span>
  <input class="govuk-input govuk-input--width-10" id="input-width-10" name="test-width-10"  type="text" aria-describedby="input-width-10-hint">
</div>

Macro

{% from "input/macro.njk" import govukInput %}

{{ govukInput({
  "label": {
    "text": "National insurance number"
  },
  "hint": {
    "text": "It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’."
  },
  "id": "input-width-10",
  "name": "test-width-10",
  "classes": "govuk-input--width-10"
}) }}

Input with width-20 class

(open in a new window)
Code

Markup

<div class="govuk-form-group">
  <label class="govuk-label" for="input-width-20">
    National insurance number
  </label>
  <span id="input-width-20-hint" class="govuk-hint">
    It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.
  </span>
  <input class="govuk-input govuk-input--width-20" id="input-width-20" name="test-width-20"  type="text" aria-describedby="input-width-20-hint">
</div>

Macro

{% from "input/macro.njk" import govukInput %}

{{ govukInput({
  "label": {
    "text": "National insurance number"
  },
  "hint": {
    "text": "It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’."
  },
  "id": "input-width-20",
  "name": "test-width-20",
  "classes": "govuk-input--width-20"
}) }}

Input with width-30 class

(open in a new window)
Code

Markup

<div class="govuk-form-group">
  <label class="govuk-label" for="input-width-30">
    National insurance number
  </label>
  <span id="input-width-30-hint" class="govuk-hint">
    It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.
  </span>
  <input class="govuk-input govuk-input--width-30" id="input-width-30" name="test-width-30"  type="text" aria-describedby="input-width-30-hint">
</div>

Macro

{% from "input/macro.njk" import govukInput %}

{{ govukInput({
  "label": {
    "text": "National insurance number"
  },
  "hint": {
    "text": "It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’."
  },
  "id": "input-width-30",
  "name": "test-width-30",
  "classes": "govuk-input--width-30"
}) }}

Input 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="input-with-page-heading">
      National Insurance number
    </label>
    </h1>
  <input class="govuk-input" id="input-with-page-heading" name="test-name"  type="text">
</div>

Macro

{% from "input/macro.njk" import govukInput %}

{{ govukInput({
  "label": {
    "text": "National Insurance number",
    "isPageHeading": true
  },
  "id": "input-with-page-heading",
  "name": "test-name"
}) }}

Input with optional form-group classes

(open in a new window)
Code

Markup

<div class="govuk-form-group extra-class">
  <label class="govuk-label" for="input-example">
    National Insurance number
  </label>
  <input class="govuk-input" id="input-example" name="test-name"  type="text">
</div>

Macro

{% from "input/macro.njk" import govukInput %}

{{ govukInput({
  "label": {
    "text": "National Insurance number"
  },
  "id": "input-example",
  "name": "test-name",
  "formGroup": {
    "classes": "extra-class"
  }
}) }}

Input with autocomplete attribute

(open in a new window)
Code

Markup

<div class="govuk-form-group">
  <label class="govuk-label" for="input-with-autocomplete-attribute">
    Postcode
  </label>
  <input class="govuk-input" id="input-with-autocomplete-attribute" name="postcode"  type="text" autocomplete="postal-code">
</div>

Macro

{% from "input/macro.njk" import govukInput %}

{{ govukInput({
  "label": {
    "text": "Postcode"
  },
  "id": "input-with-autocomplete-attribute",
  "name": "postcode",
  "autocomplete": "postal-code"
}) }}

Input with pattern attribute

(open in a new window)
Code

Markup

<div class="govuk-form-group">
  <label class="govuk-label" for="input-with-pattern-attribute">
    Numbers only
  </label>
  <input class="govuk-input" id="input-with-pattern-attribute" name="numbers-only"  type="number" pattern="[0-9]*">
</div>

Macro

{% from "input/macro.njk" import govukInput %}

{{ govukInput({
  "label": {
    "text": "Numbers only"
  },
  "id": "input-with-pattern-attribute",
  "name": "numbers-only",
  "type": "number",
  "pattern": "[0-9]*"
}) }}