Select

When to use this component

When to not use this component

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.

How it works

If you use the select component for settings, you can make an option pre-selected by default when users first see it.

If you use the select component for questions, you should not pre-select any of the options in case it influences users' answers.

Copy and amend the HTML examples

Choose the appropriate example from this page and copy the HTML directly into your web template. Read about layouts for more information about how to structure your web template.

If the component needs to submit to a field in CRM, replace the highlighted schema-name text in the example HTML with the target field schema name. Do not remove any prepended or appended text to the schema name. For example, if the id attribute is displayed as schema-name-hint in the example, the value should still contain -hint after the schema name has been replaced (dfe_field-hint).

If you are asking one question on the page

If you are asking just one question on the page, set the contents of the <label> as the page heading. This is good practice as it means that users of screen readers will only hear the contents once.

You will need to include an empty {% title %} block in your web template to override the default page header.

Radio component

      
      
<div class="govuk-form-group">
  <h1 class="govuk-label-wrapper">
    <label class="govuk-label govuk-label--l" for="schema-name">
      Choose location
    </label>
  </h1>
  <select class="govuk-select" id="schema-name" name="schema-name">
    <option value="choose" selected>Choose location</option>
    <option value="eastmidlands">East Midlands</option>
    <option value="eastofengland">East of England</option>
    <option value="london">London</option>
    <option value="northeast">North East</option>
    <option value="northwest">North West</option>
    <option value="southeast">South East</option>
    <option value="southwest">South West</option>
    <option value="westmidlands">West Midlands</option>
    <option value="yorkshire">Yorkshire and the Humber</option>
  </select>
</div>

      
    

Warning This is a basic web template page layout with a logged in user check and does not include additional liquid items which are common place on a CRM Portal, for example, web role, URL parameter or record checks.

      
      

{% extends 'DfE/Layouts/2ColumnWideLeft' %}

{% block title %}{% endblock %}   

{% block main %}
  {% unless user %}
    <script>
      window.location.href="{{ sitemarkers['DfE/Error/AccessDenied'].url }}"
    </script>
  {% endunless %}

  ## HTML content goes here ##

{% endblock %}


      
    

If you are asking more than one question on the page

If you're asking more than one question on the page, do not set the contents of the <legend> as the page heading.

Radio component

      
      
<div class="govuk-form-group">
  <label class="govuk-label" for="schema-name">
    Choose location
  </label>
  <select class="govuk-select" id="schema-name" name="schema-name">
    <option value="choose" selected>Choose location</option>
    <option value="eastmidlands">East Midlands</option>
    <option value="eastofengland">East of England</option>
    <option value="london">London</option>
    <option value="northeast">North East</option>
    <option value="northwest">North West</option>
    <option value="southeast">South East</option>
    <option value="southwest">South West</option>
    <option value="westmidlands">West Midlands</option>
    <option value="yorkshire">Yorkshire and the Humber</option>
  </select>
</div>

      
    

Warning This is a basic web template page layout with a logged in user check and does not include additional liquid items which are common place on a CRM Portal, for example, web role, URL parameter or record checks.

      
      

{% extends 'DfE/Layouts/2ColumnWideLeft' %} 

{% block main %}
  {% unless user %}
    <script>
      window.location.href="{{ sitemarkers['DfE/Error/AccessDenied'].url }}"
    </script>
  {% endunless %}

  ## HTML content goes here ##

{% endblock %}


      
    

Using hint text

Use hint text for help that's relevant to the majority of users, like how their information will be used, or where to find it. The hint text block is included in the example below.

Make sure to use the hint code block with the correct component for whether there is more than one question on a page or not.

Hint text is not mandatory.

Radio component

Choose a single option to sort by

      
      
<div class="govuk-form-group">
  <h1 class="govuk-label-wrapper">
    <label class="govuk-label govuk-label--l" for="schema-name">
      Sort by
    </label>
  </h1>
  <div id="schema-name-hint" class="govuk-hint">
    Choose a single option to sort by
  </div>
  <select class="govuk-select" id="schema-name" name="schema-name">
    <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>

      
    

Warning This is a basic web template page layout with a logged in user check and does not include additional liquid items which are common place on a CRM Portal, for example, web role, URL parameter or record checks.

      
      

{% extends 'DfE/Layouts/2ColumnWideLeft' %}

{% block title %}{% endblock %}   

{% block main %}
  {% unless user %}
    <script>
      window.location.href="{{ sitemarkers['DfE/Error/AccessDenied'].url }}"
    </script>
  {% endunless %}

  ## HTML content goes here ##

{% endblock %}


      
    

When not to use hint text

Do not use long paragraphs and lists in hint text. Screen readers read out the entire text when users interact with the form element. This could frustrate users if the text is long.

Avoid links in hint text

Do not include links within hint text. While screen readers will read out the link text when describing the field, they will not tell users that the text is a link.

Error messages

An error message is shown next to the field and in the error summary when there is a validation error. The custom CRM portal helper framework automatically processes and handles error messages for specific error states and is included in the files for the core portal set up. You do not need to add any custom error containers to your page.

If nothing is chosen and the question is required

'Choose [whatever it is]'.

For example, 'Choose location'.

Occasionally you may wish to use error messages outside of the validation process. You can read about the functions available within the portal helper framework to help you with this.