Radios

When to use this component

Use the radios component when users can only select one option from a list.

When not to 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

Read the GOV.UK Design System guidance on radios (opens in a new tab) for information on ordering options, hint text, and accessibility considerations.

HTML examples

Copy the HTML into your web template. Replace schema-name with your CRM field schema name, keeping any suffixes like -hint. This is required for the CRM helper framework to validate and submit data.

Use the input field above each example to enter your schema name. This updates all instances in the code automatically, ensuring no mistakes that could impact validation or accessibility.

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' by entering your CRM field schema name.

<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 commonplace on a CRM Portal.

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

{% block title %}{% endblock %}

{% block main %}

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

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

{% 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.