Select - Rozbaľovací zoznam

Rozbaľovací zoznam

Otvoriť ukážku na novej záložke

Zdrojový kód

HTML

<div class="govuk-form-group">
  <label class="govuk-label" for="select-1">
    Label text goes here
      <span class="idsk-required">*</span>
  </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>

Makro

{% from "govuk/components/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
    }
  ]
}) }}

Rozbaľovací zoznam with no items

Otvoriť ukážku na novej záložke

Zdrojový kód

HTML

<div class="govuk-form-group">
  <label class="govuk-label" for="select-1">
    Horse with no name
      <span class="idsk-required">*</span>
  </label>
  <select class="govuk-select" id="select-1" name="select-1">
  </select>
</div>

Makro

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

{{ govukSelect({
  id: "select-1",
  name: "select-1",
  label: {
    text: "Horse with no name"
  },
  items: []
}) }}

Rozbaľovací zoznam with selected value

Otvoriť ukážku na novej záložke

Zdrojový kód

HTML

<div class="govuk-form-group">
  <label class="govuk-label" for="select-1">
    Label text goes here
      <span class="idsk-required">*</span>
  </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>

Makro

{% from "govuk/components/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"
    },
    {
      value: 3,
      text: "GOV.UK frontend option 3",
      disabled: true
    }
  ],
  value: 2
}) }}

Rozbaľovací zoznam with hint text and error message

Otvoriť ukážku na novej záložke

Zdrojový kód

HTML

<div class="govuk-form-group govuk-form-group--error">
  <label class="govuk-label" for="select-2">
    Label text goes here
      <span class="idsk-required">*</span>
  </label>
  <div id="select-2-hint" class="govuk-hint">
    Hint text goes here
  </div>
  <p id="select-2-error" class="govuk-error-message">
    <span class="govuk-visually-hidden">Chyba:</span> Error message goes here
  </p>
  <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>

Makro

{% from "govuk/components/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"
    }
  ]
}) }}

Rozbaľovací zoznam with label as page heading

Otvoriť ukážku na novej záložke

Zdrojový kód

HTML

<div class="govuk-form-group">
  <h1 class="govuk-label-wrapper">
    <label class="govuk-label govuk-label--l" for="select-3">
      Label text goes here
        <span class="idsk-required">*</span>
    </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>

Makro

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

{{ govukSelect({
  id: "select-3",
  name: "select-3",
  label: {
    text: "Label text goes here",
    classes: "govuk-label--l",
    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
    }
  ]
}) }}

Rozbaľovací zoznam with full width override

Otvoriť ukážku na novej záložke

Zdrojový kód

HTML

<div class="govuk-form-group">
  <label class="govuk-label" for="select-1">
    Label text goes here
      <span class="idsk-required">*</span>
  </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>

Makro

{% from "govuk/components/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
    }
  ]
}) }}

Rozbaľovací zoznam with optional form-group classes

Otvoriť ukážku na novej záložke

Zdrojový kód

HTML

<div class="govuk-form-group extra-class">
  <label class="govuk-label" for="select-1">
    Label text goes here
      <span class="idsk-required">*</span>
  </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>

Makro

{% from "govuk/components/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
    }
  ]
}) }}