GOVUK Select

An example of the govuk select component.

Open example in new window
HTML 



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

  <label class="govuk-label" for="sort">
  Sort by
</label>



  <select class="govuk-select" id="sort" name="sort">



        <option value="published">Recently published</option>



        <option value="updated" selected>Recently updated</option>



        <option value="views">Most views</option>



        <option value="comments">Most comments</option>



  </select>
</div>
Jinja 
{% from "govuk_frontend_jinja/components/select/macro.html" import govukSelect -%}
{{ govukSelect({
    "id": "sort",
    "name": "sort",
    "label": {
      "text": "Sort by"
    },
    "items": [
      {
        "value": "published",
        "text": "Recently published"
      },
      {
        "value": "updated",
        "text": "Recently updated",
        "selected": true
      },
      {
        "value": "views",
        "text": "Most views"
      },
      {
        "value": "comments",
        "text": "Most comments"
      }
    ]
}) }}