Select - Rozbaľovací zoznam

Rozbaľovací zoznam

Otvoriť príklad na novej záložke

Code

Markup

<div class="govuk-form-group">








  <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 "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ť príklad na novej záložke

Code

Markup

<div class="govuk-form-group">








  <select class="govuk-select" id="select-1" name="select-1">
  </select>
</div>

Macro

{% 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ť príklad na novej záložke

Code

Markup

<div class="govuk-form-group">








  <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 "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ť príklad na novej záložke

Code

Markup

<div class="govuk-form-group govuk-form-group--error">















  <p id="select-2-error" class="govuk-error-message">
    <span class="govuk-visually-hidden">Error:</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>

Macro

{% 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ť príklad na novej záložke

Code

Markup

<div class="govuk-form-group">








  <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 "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ť príklad na novej záložke

Code

Markup

<div class="govuk-form-group">








  <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 "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ť príklad na novej záložke

Code

Markup

<div class="govuk-form-group extra-class">








  <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 "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
    }
  ]
}) }}