Radios

When to use this component

Use the radios component when users can only select one option from a list. This can be used when the target field is a lookup, select, boolean or text type.

When to not use this component

Do not use the radios component if users might need to select more than one option. In this case, you should use the checkboxes component instead.

How it works

Always position radios to the left of their labels. This makes them easier to find, especially for users of screen magnifiers.

Unlike with checkboxes, users can only select one option from a list of radios. Do not assume that users will know how many options they can select based on the visual difference between radios and checkboxes alone. If needed, add a hint explaining this, for example, 'Select one option'.

Do not pre-select radio options as this makes it more likely that users will not realise they've missed a question or submitted the wrong answer.

Users cannot go back to having no option selected once they have selected one, without refreshing their browser window. Therefore, you should include 'None of the above' or 'I do not know' if they are valid options.

Order radio options alphabetically by default.

HTML examples

Select the appropriate example from this page and directly integrate the HTML into your web template. You can customise these examples to align with your specific requirements, as indicated below. Refer to the layouts section for further guidance on structuring your web template.

If the component requires submission to a CRM field, ensure to replace the placeholder schema-name text in the HTML example with the actual target field schema name. Retain any prefixed or suffixed text related to the schema name. For instance, if the id attribute reads schema-name-hint in the example, ensure the replacement maintains the -hint suffix (e.g. dfe_field-hint).

This step is crucial for allowing the CRM helper framework to validate and submit data to CRM.

For single question pages

If presenting only one question on the page, designate the contents of the label as the page heading. This practice ensures users of screen readers hear the contents only once.

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

Where do you live?

England

Scotland

Wales

Northern Ireland

Update the HTML example

Replace 'schema-name' in the example by entering the schema name of your target CRM field.


<div class="govuk-form-group">
  <fieldset class="govuk-fieldset">
    <legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
      <h1 class="govuk-fieldset__heading">
        Where do you live?
      </h1>
    </legend>
    <div class="govuk-radios" data-module="govuk-radios">
      <div class="govuk-radios__item">
        <input class="govuk-radios__input" id="schema-name" name="schema-name" type="radio" value="england">
        <label class="govuk-label govuk-radios__label" for="schema-name">
          England
        </label>
      </div>
      <div class="govuk-radios__item">
        <input class="govuk-radios__input" id="schema-name-2" name="schema-name" type="radio" value="scotland">
        <label class="govuk-label govuk-radios__label" for="schema-name-2">
          Scotland
        </label>
      </div>
      <div class="govuk-radios__item">
        <input class="govuk-radios__input" id="schema-name-3" name="schema-name" type="radio" value="wales">
        <label class="govuk-label govuk-radios__label" for="schema-name-3">
          Wales
        </label>
      </div>
      <div class="govuk-radios__item">
        <input class="govuk-radios__input" id="schema-name-4" name="schema-name" type="radio" value="northern-ireland">
        <label class="govuk-label govuk-radios__label" for="schema-name-4">
          Northern Ireland
        </label>
      </div>
    </div>
  </fieldset>
</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 %}

For multiple question pages

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