Skip to main content
Component Pad – Experimental – output can be wrong
GOV.UK Frontend

Select

Component guide

Example




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

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