Skip to main content Components
Select
Sort by Recently published Recently updated Most views Most comments
Props When to use this component
The select component should only be used as a last resort in public-facing services because research shows that some users find selects very difficult to use.
How it works
The select component allows users to choose an option from a long list. Before using the select component, try asking users questions which will allow you to present them with fewer options.
Asking questions means you’re less likely to need to use the select component, and can consider using a different solution, such as radios.
Sort by Recently published Recently updated Most views Most comments
< divid = " sort" class = " govuk-form-group" > < labelfor = " sort-input" class = " govuk-label" aria-hidden = " false" > </ label> < selectname = " sort" class = " govuk-select" id = " sort-input" > < optionvalue = " published" > </ option> < optionvalue = " updated" selected = " " > </ option> < optionvalue = " views" > </ option> < optionvalue = " comments" > </ option> </ select> </ div>
< Select label = " Sort by" name = " sort" options = { [
{
label : "Recently published" ,
value : "published" ,
} ,
{
label : "Recently updated" ,
selected : true ,
value : "updated" ,
} ,
{
label : "Most views" ,
value : "views" ,
} ,
{
label : "Most comments" ,
value : "comments" ,
} ,
] } />
< divid = " sort" class = " govuk-form-group" > < labelfor = " sort-input" class = " govuk-label" aria-hidden = " false" > </ label> < selectname = " sort" class = " govuk-select" id = " sort-input" > < optionvalue = " published" > </ option> < optionvalue = " updated" selected = " " > </ option> < optionvalue = " views" > </ option> < optionvalue = " comments" > </ option> </ select> </ div>
< Select label = " Sort by" name = " sort" options = { [
{
label : "Recently published" ,
value : "published" ,
} ,
{
label : "Recently updated" ,
selected : true ,
value : "updated" ,
} ,
{
label : "Most views" ,
value : "views" ,
} ,
{
label : "Most comments" ,
value : "comments" ,
} ,
] } />