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

Doména gov.sk je oficá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. Select

Select

Code

Markup

<div class="govuk-form-group">
  <label class="govuk-label" for="select-1">
    Label text goes here
  </label>
  <select class="govuk-select" id="select-1" name="select-1">
      <option value="1">GOV.UK frontend option 1</option>
      <option value="2" selected>GOV.UK frontend option 2</option>
      <option value="3" disabled>GOV.UK frontend option 3</option>
  </select>
</div>

Macro

{% from "select/macro.njk" import govukSelect %}

{{ govukSelect({
  "id": "select-1",
  "name": "select-1",
  "label": {
    "text": "Label text goes here"
  },
  "items": [
    {
      "value": 1,
      "text": "GOV.UK frontend option 1"
    },
    {
      "value": 2,
      "text": "GOV.UK frontend option 2",
      "selected": true
    },
    {
      "value": 3,
      "text": "GOV.UK frontend option 3",
      "disabled": true
    }
  ]
}) }}

Select with hint text and error message

(open in a new window)
Code

Markup

<div class="govuk-form-group govuk-form-group--error">
  <label class="govuk-label" for="select-2">
    Label text goes here
  </label>
  <span id="select-2-hint" class="govuk-hint">
    Hint text goes here
  </span>
  <span id="select-2-error" class="govuk-error-message">
  <span class="govuk-visually-hidden">Error:</span> Error message goes here
  </span>
  <select class="govuk-select govuk-select--error" id="select-2" name="select-2" aria-describedby="select-2-hint select-2-error">
      <option value="1">GOV.UK frontend option 1</option>
      <option value="2">GOV.UK frontend option 2</option>
      <option value="3">GOV.UK frontend option 3</option>
  </select>
</div>

Macro

{% from "select/macro.njk" import govukSelect %}

{{ govukSelect({
  "id": "select-2",
  "name": "select-2",
  "label": {
    "text": "Label text goes here"
  },
  "hint": {
    "text": "Hint text goes here"
  },
  "errorMessage": {
    "text": "Error message goes here"
  },
  "items": [
    {
      "value": 1,
      "text": "GOV.UK frontend option 1"
    },
    {
      "value": 2,
      "text": "GOV.UK frontend option 2"
    },
    {
      "value": 3,
      "text": "GOV.UK frontend option 3"
    }
  ]
}) }}

Select 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="select-3">
      Label text goes here
    </label>
    </h1>
  <select class="govuk-select" id="select-3" name="select-3">
      <option value="1">GOV.UK frontend option 1</option>
      <option value="2" selected>GOV.UK frontend option 2</option>
      <option value="3" disabled>GOV.UK frontend option 3</option>
  </select>
</div>

Macro

{% from "select/macro.njk" import govukSelect %}

{{ govukSelect({
  "id": "select-3",
  "name": "select-3",
  "label": {
    "text": "Label text goes here",
    "isPageHeading": true
  },
  "items": [
    {
      "value": 1,
      "text": "GOV.UK frontend option 1"
    },
    {
      "value": 2,
      "text": "GOV.UK frontend option 2",
      "selected": true
    },
    {
      "value": 3,
      "text": "GOV.UK frontend option 3",
      "disabled": true
    }
  ]
}) }}

Select with full width override

(open in a new window)
Code

Markup

<div class="govuk-form-group">
  <label class="govuk-label" for="select-1">
    Label text goes here
  </label>
  <select class="govuk-select govuk-!-width-full" id="select-1" name="select-1">
      <option value="1">GOV.UK frontend option 1</option>
      <option value="2" selected>GOV.UK frontend option 2</option>
      <option value="3" disabled>GOV.UK frontend option 3</option>
  </select>
</div>

Macro

{% from "select/macro.njk" import govukSelect %}

{{ govukSelect({
  "id": "select-1",
  "name": "select-1",
  "classes": "govuk-!-width-full",
  "label": {
    "text": "Label text goes here"
  },
  "items": [
    {
      "value": 1,
      "text": "GOV.UK frontend option 1"
    },
    {
      "value": 2,
      "text": "GOV.UK frontend option 2",
      "selected": true
    },
    {
      "value": 3,
      "text": "GOV.UK frontend option 3",
      "disabled": true
    }
  ]
}) }}

Select with optional form-group classes

(open in a new window)
Code

Markup

<div class="govuk-form-group extra-class">
  <label class="govuk-label" for="select-1">
    Label text goes here
  </label>
  <select class="govuk-select govuk-!-width-full" id="select-1" name="select-1">
      <option value="1">GOV.UK frontend option 1</option>
      <option value="2" selected>GOV.UK frontend option 2</option>
      <option value="3" disabled>GOV.UK frontend option 3</option>
  </select>
</div>

Macro

{% from "select/macro.njk" import govukSelect %}

{{ govukSelect({
  "id": "select-1",
  "name": "select-1",
  "classes": "govuk-!-width-full",
  "label": {
    "text": "Label text goes here"
  },
  "formGroup": {
    "classes": "extra-class"
  },
  "items": [
    {
      "value": 1,
      "text": "GOV.UK frontend option 1"
    },
    {
      "value": 2,
      "text": "GOV.UK frontend option 2",
      "selected": true
    },
    {
      "value": 3,
      "text": "GOV.UK frontend option 3",
      "disabled": true
    }
  ]
}) }}