Cookies on ons.gov.uk

Cookies are small files stored on your device when you visit a website. We use some essential cookies to make this website work.

We would like to set additional cookies to remember your settings and understand how you use the site. This helps us to improve our services.

You have accepted all additional cookies. You have rejected all additional cookies. You can change your cookie preferences at any time.

Skip to main content

Pages Question

Overview

Question pages are the most frequently used parts of a survey or questionnaire. They ask for a response from the user but they do not have to be mandatory; this will depend on the survey and what data is essential.

When to use this pattern

Use this pattern when you need a user to give you some information.

When not to use this pattern

Do not use this pattern for any pages that are not asking for information. For example, use start pages and interstitial pages to give the user information they need to complete the questions.

How to use this pattern

A question page can be built using the question macro onsQuestion().

Use the parameters in the following table to build the common question elements. This will make sure the they are used correctly and the spacing is consistent across all questions. You need to import any applicable component for the required type of answer.

Use the basic content principles to make sure the content on your question pages is clearly written and accessible. Keep your content short so users do not have too much to read and can continue their journey without interruption. Each part of the page should follow the specific content guidance.

Question headings

Most question headings are questions that end with a question mark. If they are a statement, do not include a full stop at the end. For example:

How has your turnover changed in the 12 months?
and
Please describe any changes to your turnover in more detail

Other things to remember for headings are:

  • front-load them with the most important information
  • use sentence case – only the first letter is upper case unless there are proper nouns
  • only use highlighting where there has been a change to a question that is either the same as, or very similar to, previous ones – for example, the time period changes
  • only state a reporting period in the questions once per section of a survey if possible

Question description (optional)

A question description adds context to a survey question. It could be an instruction on how to answer it. It should not be used unless there is evidence that users need it to help them answer.

Question descriptions should be relevant to that question and not refer to any previous or upcoming questions.

You can use bold for important words and short phrases in the question description. Do not overuse bold text as this will reduce its impact.

A question description should have a full stop at the end only if there is more than one sentence.

Question definition (optional)

Use a question definition to define a word or acronym that is in the question.

A question definition uses the collapsed details component so that it does not disrupt the flow of the page for users who do not need the definition.

Write them as statements rather than questions, for example:

What we mean by “employee”
rather than
What does “employee” mean?

Only use one question description on a page.

Question guidance (optional)

Question guidance panels are for extra information that a user needs to know to answer a question. Use them to explain what they should include or not include in their answer.

Format using bold for the Include and Exclude labels. If there is a single exclude or include, format this as a single line without the bold:

Example Panel With Information contents

Nunjucks

{% from "components/panel/_macro.njk" import onsPanel %}

{{
    onsPanel({
        "body": '<p>Include all rooms built or converted for use as bedrooms</p>'
    })
}}

Nunjucks macro options

NameTypeRequiredDescription
bodystringtrueThe contents of the panel. This can contain HTML.
titlestringfalseThe title for the error summary panel
titleTagstringfalseThe HTML heading tag for the title. Use to ensure the title has a correct semantic order on the page. Will default to an h2
typestringfalseA single value to adjust the component using available variants: “success”, “warn”, “ghost”, “bare”, “error”, “branded”, “warn-branded”, and “announcement”
spaciousbooleanfalseSet to “true” to double the padding spacing surrounding the body content if required
classesstringfalseCustom classes to add to the panel
idstringfalseThe HTML id for the panel
attributesobjectfalseHTML attributes to apply to the panel (for example, data attributes)
assistiveTextPrefixstringfalseSets the visually hidden prefix text for screen readers. Default values for each panel type:
  • information and branded – “Important information: ”
  • success – “Completed: ”
  • warn and warn-branded – “Warning: ”
  • error– “Error: ”
iconTypestringfalseAdds an icon to the panel, before the body content, by setting the icon type
iconSizestringfalseIcon size can be set to match the size of the body content text as detailed in the typography type scale

HTML

<div class="ons-panel ons-panel--info ons-panel--no-title">
  <span class="ons-panel__assistive-text ons-u-vh">Important information: </span>
  <div class="ons-panel__body">
    <p>Include all rooms built or converted for use as bedrooms</p>
  </div>
</div>

Answers and answer descriptions

Follow the basic content principles of answers and descriptions. Keeping both of them short is important to avoid the user getting overwhelmed by the choices.

Do not use full stops on answers or answer descriptions (unless the description is more than one sentence).

Question justification (optional)

Use a question justification to explain why a question is being asked if there is evidence that users want to know this.

A question justification uses the collapsed details component and is positioned at the bottom of the page so it does not disrupt the flow of the page for users.

Like the question definition, write them as statements rather than questions, for example:

Why we ask this question
rather than
Why do we ask this question?

Accessibility

The question heading should always be an <h1>.

When the answer fields should be wrapped in a fieldset with legend

In the following scenarios, the answer fields should be wrapped with the fieldset macro, with a legend that matches the question title. This provides context to screen readers about what is being asked when a user focuses on an input element for an answer.

Answers should be wrapped in a fieldset when:

  • the question type is mutually exclusive
  • there are multiple answers (except when the question type is a date range)
  • if any of the answers to the questions are checkboxes
  • if any of the answers to the questions are radios
  • if one of the answers to the question is a date
  • if any of the answers to the question are a duration

When wrapping the radios in a fieldset for the relationships pattern, you should add "readDescriptionFirst": true so screen readers announce the description before the question heading.

Legend as question heading

When the question page contains a fieldset, it is quite possible that the question heading (<h1>) is the same as what the legend needs to be.

To avoid the visual repetition of text you should wrap the <h1> inside the <legend>. Add the parameter "legendIsQuestionTitle": true inside the onsQuestion configuration. You also need to include "dontWrap": true in the configuration of the component you are using for the answer.

Warning:

Do not use a utility class to visually hide the repetitive legend because this does not avoid the repetition for screen reader users

Examples

Question as a fieldset

Example: Question as a fieldset contents

Nunjucks

{% extends "layout/_template.njk" %}
{% from "components/question/_macro.njk" import onsQuestion %}
{% from "components/radios/_macro.njk" import onsRadios %}

{% set pageConfig = {
    "header": {
        "title": "Question example"
    },
    "breadcrumbs": {
        "ariaLabel": 'Breadcrumbs',
        "itemsList": [
            {
                "url": '#0',
                "text": 'Previous'
            }
        ]
    }
} %}

{% set questionTitle = "On 1 May 2016, what was the number of employees for Bolt and Ratchet?" %}

{% block main %}
    {% call onsQuestion({
        "title": questionTitle,
        "description": "<p>This is all employees aged 16 years or over that your organisation employs</p>",
        "definition": {
            "title": "What we mean by “employee”",
            "content": "<p>An employee is a person that your organisation directly pays from its payroll(s), in return for carrying out a full-time or part-time job</p>"
        },
        "guidance": {
            "lists": [
                {
                    "listHeading": "Include:",
                    "itemsList": [
                        {
                            "text": "all employees in Great Britain (England, Scotland and Wales), both full and part-time, who received pay in the relevant period"
                        }
                    ]
                },
                {
                    "listHeading": "Exclude:",
                    "itemsList": [
                        {
                            "text": "trainees on government schemes"
                        },
                        {
                            "text": "employees working abroad unless paid directly from this business’s GB payroll"
                        }
                    ]
                }
            ]
        },
        "justification": {
            "title": "Why we ask this question",
            "content": "<p>We ask this question in order to understand the size of organisations in the UK</p>"
        },
        "submitButton": true
    }) %}

        {{ onsRadios({
            "id": "number-of-employees",
            "name": "number-of-employees",
            "legend": questionTitle,
            "legendClasses": "ons-u-vh",
            "radios": [
                {
                    "id": "number-of-employees-1-9",
                    "label": {
                        "text": "1 – 9 employees"
                    },
                    "value": "1-9"
                },
                {
                    "id": "number-of-employees-10-49",
                    "label": {
                        "text": "10 – 49 employees"
                    },
                    "value": "10-49"
                },
                {
                    "id": "number-of-employees-50-100",
                    "label": {
                        "text": "50 – 100+ employees",
                        "description": "Include multi-corporations"
                    },
                    "value": "50-100"
                }
            ]
        }) }}

    {% endcall %}
{% endblock %}

      {% block scripts %}
        {% from "components/embeddable/macro.njk" import embeddable %}
        {{ embeddable() }}

        <style>
          body {
            height: auto;
          }
        </style>

        <script src="{{ site.baseUrl }}js/main.js?t={{ cacheTime }}"></script>
      {% endblock %}
    

Nunjucks macro options

NameTypeRequiredDescription
titlestringtrueThe question heading
descriptionstringfalseThe question description to be used to provide added context to the question. This can contain HTML.
instructionstringfalseAn interviewer instruction. This can contain HTML.
definition<Object>QuestionDefinitionfalseSettings for the question definition to be used to define a word or acronym that is in the question
guidance<Object>QuestionGuidancefalseSettings for the question guidance to be used to state what should be included or excluded from the answer
justification<Object>QuestionJustificationfalseSettings for the question justification to be used to explain why a question is being asked
submitButton<Object>SubmitButton or booleanfalseSettings for the submit button. If a value of true is provided, default attributes will be used.
idstringfalseThe HTML id for the component
classesstringfalseClasses to add the component
attributesobjectfalseHTML attributes (for example, data attributes) to add to the component
readDescriptionFirstbooleanfalseSet to “true” to make screen readers read out question description first. Used in the relationships pattern where the description instructs the user to complete the sentence in the heading.
legendIsQuestionTitlebooleantrue (unless legend is set)Creates an h1 inside the legend. Use when there is only a single fieldset on the page
legendClassesstringfalseClasses to apply to the HTML legend element when using legendIsQuestionTitle
legendTitleClassesstringfalseClasses to apply to the h1 heading element when using legendIsQuestionTitle

QuestionDefinition

NameTypeRequiredDescription
idstringtrueThe HTML id of the question definition details
titlestringtrueThe title of the question definition details
contentstringtrueThe content of the question definition details. This can contain HTML.

QuestionGuidance

NameTypeRequiredDescription
contentstringfalseThe contents of the question guidance panel. This can contain HTML.
listsArray<GuidanceLists>falseAn array of lists with sub-headings used to state what should be included or excluded from the answer

GuidanceLists

NameTypeRequiredDescription
listHeadingstringfalseA heading for each include/exclude list
listLeadingLinestringfalseA leading line for each list
itemsListList (ref)trueAn array of list items for each list

QuestionJustification

NameTypeRequiredDescription
idstringtrueThe HTML id of the question justification details
titlestringfalseThe title of the question justification details. Defaults to “Why we ask this question”.
contentstringtrueThe content of the question definition details. This can contain HTML.

SubmitButton

NameTypeRequiredDescription
idstringfalseThe HTML id of the button
variantsstringfalseIf set to “timer” the button will be disabled for a short time to stop double-clicks from submitting the form twice. Setting to “loader” will disable the button when selected and show an animated loading icon.
textstringfalseText for the button label. Defaults to “Save and continue”.
classesstringfalseClasses to add the button element
attributesobjectfalseHTML attributes (for example, data attributes) to add to the button

HTML

<!doctype html>
<html lang="en">

  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Example: Question as a fieldset</title>
    <link rel="stylesheet" href="https://cdn.ons.gov.uk/sdc/design-system/65.2.3/css/main.css">
    <link rel="stylesheet" media="print" href="https://cdn.ons.gov.uk/sdc/design-system/65.2.3/css/print.css">
    <meta name="theme-color" content="#206095" />
    <!-- Open Graph -->
    <meta property="og:type" content="website">
    <meta property="og:url" content="">
    <meta property="og:title" content="">
    <meta property="og:image" content="https://cdn.ons.gov.uk/sdc/design-system/65.2.3/favicons/opengraph.png">
    <meta property="og:image:type" content="image/png">
    <meta property="og:image:width" content="1200">
    <meta property="og:image:height" content="630">
    <meta property="og:description" content="">
    <meta property="og:site_name" content="Question example">
    <meta property="og:locale" content="en">
    <!-- Favicons -->
    <link rel="icon" type="image/x-icon" href="https://cdn.ons.gov.uk/sdc/design-system/65.2.3/favicons/favicon.ico">
    <link rel="icon" type="image/png" href="https://cdn.ons.gov.uk/sdc/design-system/65.2.3/favicons/favicon-32x32.png"
      sizes="32x32">
    <link rel="icon" type="image/png" href="https://cdn.ons.gov.uk/sdc/design-system/65.2.3/favicons/favicon-16x16.png"
      sizes="16x16">
    <link rel="mask-icon" href="https://cdn.ons.gov.uk/sdc/design-system/65.2.3/favicons/safari-pinned-tab.svg"
      color="#000000">
    <link rel="apple-touch-icon" type="image/png"
      href="https://cdn.ons.gov.uk/sdc/design-system/65.2.3/favicons/apple-touch-icon.png" sizes="180x180">
    <link rel="manifest" href="https://cdn.ons.gov.uk/sdc/design-system/65.2.3/favicons/manifest.json">
  </head>

  <body>
    <script>
      document.body.className = ((document.body.className) ? document.body.className + ' ons-js-enabled' :
        'ons-js-enabled');
    </script>
    <div class="ons-page">
      <div class="ons-page__content">
        <a class="ons-skip-to-content" href="#main-content">Skip to main content</a>
        <header class="ons-header " role="banner">
          <div class="ons-browser-banner">
            <div class="ons-container">
              <p class="ons-browser-banner__content"><span class="ons-browser-banner__lead">This website no longer
                  supports your browser.</span><span class="ons-browser-banner__cta"> You can <a
                    class="ons-browser-banner__link" href="https://www.ons.gov.uk/help/browsers">upgrade your browser to
                    the latest version</a>.</span></p>
            </div>
          </div>
          <div class="ons-header__top">
            <div class="ons-container">
              <div
                class="ons-header__grid-top ons-grid ons-grid--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap">
                <div class="ons-grid__col ons-col-auto">
                  <div class="ons-header__org-logo ons-header__org-logo--large">
                    <svg class="ons-icon--logo" xmlns="http://www.w3.org/2000/svg" width="197" height="19"
                      viewBox="33 2 552 60" aria-labelledby="ons-logo-en-alt">
                      <title id="ons-logo-en-alt">Office for National Statistics logo</title>
                      <g class="ons-icon--logo__group ons-icon--logo__group--secondary" fill="#a8bd3a">
                        <path
                          d="M0,34.6c.8-1.69,1.39-3,2.32-4.6A38.28,38.28,0,0,1,0,23.4V34.6M5,3S0,3,0,9.25v1A62.12,62.12,0,0,0,4.2,27a43.77,43.77,0,0,1,9.42-10.79C21.69,9.21,31.16,5.13,45.9,3Z" />
                      </g>
                      <g class="ons-icon--logo__group ons-icon--logo__group--primary" fill="#003c57">
                        <path
                          d="M53.06,6.42C36.2,8,24.68,12.92,16.43,20.07A41.46,41.46,0,0,0,6.4,32.2C12.87,44.93,28.88,57,46.6,57H47s6.32.21,6.32-6.91V6.36a1.22,1.22,0,0,1-.26.06M9.72,42.67a44.25,44.25,0,0,1-5-7.42A80.59,80.59,0,0,0,0,46.38V56.91L31.06,57c-9.83-3-15.74-7.64-21.34-14.3" />
                      </g>
                      <g class="ons-icon--logo__group ons-icon--logo__group--text" fill="#003c57">
                        <path
                          d="M82,47.49c-9.07,0-13.13-7.51-13.13-16.77S72.91,14,82,14s13.1,7.61,13.1,16.77S91.1,47.54,82,47.54m0-30.91c-6.69,0-9.07,7.33-9.07,14.05s2.16,13.9,9.07,13.9,9-7.28,9-13.9-2.34-14-9-14" />
                        <path
                          d="M106.36,23.81V46.88h-3.67V23.81H98.93V21.56h3.76V17.9c0-4.61,2.72-7.95,8.08-7.95.38,0,.86.05.86.05v2.35h-.43c-2.55,0-4.84,1.64-4.84,5.12v4.09h5.27v2.25Z" />
                        <path
                          d="M121.53,23.81V46.88h-3.67V23.81H114.1V21.56h3.76V17.9c0-4.61,2.72-7.95,8.08-7.95.38,0,.86.05.86.05v2.35h-.43c-2.55,0-4.84,1.64-4.84,5.12v4.09h5.27v2.25Z" />
                        <path
                          d="M132.85,16.72a2.28,2.28,0,0,1-2.33-2.23v0a2.34,2.34,0,0,1,4.67,0,2.28,2.28,0,0,1-2.3,2.26h0M131,21.56h3.71V46.88H131Z" />
                        <path
                          d="M150.53,47.49c-6,0-10.63-5.16-10.63-13.29S144.52,21,150.66,21a9.76,9.76,0,0,1,6.17,1.74l-1,2.25a7.53,7.53,0,0,0-4.4-1.36c-5.15,0-7.78,4.46-7.78,10.48,0,6.2,3,10.62,7.65,10.62a8,8,0,0,0,4.49-1.37l1,2.45a10.21,10.21,0,0,1-6.3,1.73" />
                        <path
                          d="M162.84,35.75c.48,6,3.76,9,8.9,9a14.66,14.66,0,0,0,6.88-1.55l1.08,2.59a18,18,0,0,1-8.22,1.73c-7.12,0-12.18-4.23-12.18-13.34,0-8.69,4.67-13.2,11-13.2s10.37,3.95,10.37,12.4Zm7.35-12.41c-4.1,0-7.56,3.2-7.52,10.29l14.39-2c0-5.87-2.81-8.32-6.87-8.32" />
                        <path
                          d="M198.57,23.81V46.88H194.9V23.81h-3.76V21.56h3.76V17.9c0-4.61,2.72-7.95,8.08-7.95.39,0,.87.05.87.05v2.35h-.44c-2.54,0-4.84,1.64-4.84,5.12v4.09h5.28v2.25Z" />
                        <path
                          d="M217.28,47.49c-7.47,0-10.89-5.78-10.89-13.24S209.81,21,217.28,21s10.85,5.82,10.85,13.3-3.37,13.24-10.85,13.24m0-24c-5.53,0-7.13,5.59-7.13,10.81s1.73,10.56,7.13,10.56,7.13-5.35,7.13-10.56-1.6-10.81-7.13-10.81" />
                        <path
                          d="M244.08,23.91c-2.34-.61-5.75-.52-7.35.47v22.5H233V22.69c2.67-1.13,5.36-1.74,10.11-1.74H245Z" />
                        <path
                          d="M277.42,47.13,263.07,25a32.2,32.2,0,0,1-1.85-3.29h-.09s.13,1.88.13,3.85V47.13h-4.71V14.8h5.31l13.61,20.82A28.76,28.76,0,0,1,277.38,39h.08s-.17-1.84-.17-3.77V14.8H282V47.13Z" />
                        <path
                          d="M297.52,47.79c-7.43,0-10.93-3-10.93-7.81,0-6.8,7.12-8.64,15.59-9.39V29.13c0-3.47-2.37-4.51-5.83-4.51a18,18,0,0,0-6.87,1.46L288.23,23a24,24,0,0,1,9.12-1.83c5.61,0,9.93,2.3,9.93,8.78V46a22.71,22.71,0,0,1-9.76,1.83m4.66-14.67c-6.26.67-10.45,1.84-10.45,6.73,0,3.42,2.42,4.88,6.22,4.88a10.09,10.09,0,0,0,4.23-.84Z" />
                        <path
                          d="M322,47.69c-5.31,0-7.34-3.43-7.34-6.86V25.09h-3.55V21.81h3.55V16.12l5.4-1.5v7.19H325v3.28h-5V40.55a3.26,3.26,0,0,0,3,3.52h.5a5.5,5.5,0,0,0,1.46-.23v3.33a7.69,7.69,0,0,1-3,.52" />
                        <path
                          d="M331.91,17.43a3,3,0,0,1-3.15-2.81,3.17,3.17,0,0,1,6.31,0,3,3,0,0,1-3.16,2.81m-2.72,4.38h5.44V47.13h-5.44Z" />
                        <path
                          d="M350.88,47.79c-7.73,0-11.57-5.74-11.57-13.3s3.84-13.34,11.57-13.34,11.54,5.78,11.54,13.34-3.8,13.3-11.54,13.3m0-23.17c-4.66,0-6.05,4.89-6.05,9.82s1.47,9.63,6.05,9.63,6.05-4.7,6.05-9.63-1.38-9.82-6.05-9.82" />
                        <path
                          d="M382.52,47.13V29c0-3.24-2.77-4.47-5.88-4.47a12.3,12.3,0,0,0-4.37.76v21.8h-5.39V23a26.81,26.81,0,0,1,10.06-1.83c6.61,0,11,2.25,11,7.8V47.13Z" />
                        <path
                          d="M403.18,47.79c-7.43,0-10.94-3-10.94-7.81,0-6.8,7.13-8.64,15.6-9.39V29.13c0-3.47-2.37-4.51-5.83-4.51a18,18,0,0,0-6.87,1.46L393.89,23A24,24,0,0,1,403,21.15c5.62,0,9.94,2.3,9.94,8.78V46a22.71,22.71,0,0,1-9.76,1.83m4.66-14.67c-6.27.67-10.46,1.84-10.46,6.73,0,3.42,2.43,4.88,6.23,4.88a10.09,10.09,0,0,0,4.23-.84Z" />
                        <polygon
                          points="418.52 47.13 418.52 34.91 418.52 10.25 423.92 10.25 423.92 22.76 423.92 47.13 418.52 47.13" />
                        <path
                          d="M445.39,47.79A19.11,19.11,0,0,1,436.58,46l1.51-4a13.48,13.48,0,0,0,6.22,1.55c3.76,0,6.44-2.21,6.44-5.41,0-7.09-13.44-4.36-13.44-14.42,0-5.13,4.15-9.59,10.72-9.59A15.82,15.82,0,0,1,455.8,16l-1.38,3.52a11.93,11.93,0,0,0-5.66-1.5c-3.5,0-5.79,2.11-5.79,5.12,0,7,13.74,3.94,13.74,14.65,0,5.74-4.71,10-11.32,10" />
                        <path
                          d="M470.41,47.69c-5.31,0-7.34-3.43-7.34-6.86V25.09h-3.54V21.81h3.54V16.12l5.4-1.5v7.19h4.92v3.28h-4.92V40.55a3.27,3.27,0,0,0,3,3.52h.48a5.12,5.12,0,0,0,1.46-.23v3.33a7.69,7.69,0,0,1-3,.52" />
                        <path
                          d="M487.27,47.79c-7.44,0-10.93-3-10.93-7.81,0-6.8,7.13-8.64,15.6-9.39V29.13c0-3.47-2.38-4.51-5.84-4.51a18,18,0,0,0-6.87,1.46L478,23a23.94,23.94,0,0,1,9.11-1.83c5.62,0,9.94,2.3,9.94,8.78V46a22.71,22.71,0,0,1-9.76,1.83M492,33.16c-6.27.67-10.46,1.84-10.46,6.73,0,3.42,2.42,4.88,6.22,4.88a10,10,0,0,0,4.24-.84Z" />
                        <path
                          d="M511.73,47.69c-5.32,0-7.35-3.43-7.35-6.86V25.09h-3.54V21.81h3.54V16.12l5.4-1.5v7.19h4.92v3.28h-4.92V40.55a3.26,3.26,0,0,0,3,3.52h.5a5.5,5.5,0,0,0,1.46-.23v3.33a7.69,7.69,0,0,1-3,.52" />
                        <path
                          d="M521.66,17.43a3,3,0,0,1-3.15-2.81,3.17,3.17,0,0,1,6.31,0,3,3,0,0,1-3.16,2.81m-2.72,4.38h5.45V47.13h-5.45Z" />
                        <path
                          d="M536.19,47.79A15.9,15.9,0,0,1,528.54,46L530,42.48a10.53,10.53,0,0,0,5.52,1.5c2.77,0,5-1.78,5-3.94,0-6-11.1-3.2-11.1-11.47,0-3.76,3.37-7.42,8.86-7.42A13.56,13.56,0,0,1,545.34,23l-1.42,3.14a8.47,8.47,0,0,0-4.62-1.45c-2.81,0-4.54,1.69-4.54,3.62,0,5.64,11.32,3.14,11.32,11.6,0,4-3.85,7.9-9.89,7.9" />
                        <path
                          d="M559.83,47.69c-5.31,0-7.35-3.43-7.35-6.86V25.09h-3.54V21.81h3.54V16.12l5.4-1.5v7.19h4.93v3.28h-4.93V40.55a3.27,3.27,0,0,0,3,3.52h.48a5.64,5.64,0,0,0,1.47-.23v3.33a7.72,7.72,0,0,1-3,.52" />
                        <path
                          d="M569.77,17.43a3,3,0,0,1-3.15-2.81,3.17,3.17,0,0,1,6.31,0,3,3,0,0,1-3.16,2.81m-2.72,4.38h5.44V47.13h-5.44Z" />
                        <path
                          d="M588.14,47.79c-6.23,0-11-5.08-11-13.35s4.88-13.29,11-13.29A10.51,10.51,0,0,1,594.66,23l-1.21,3a6.87,6.87,0,0,0-4-1.22c-4.4,0-6.69,3.81-6.69,9.49s2.63,9.59,6.61,9.59a6.74,6.74,0,0,0,4-1.28L594.7,46c-1.12.94-3.33,1.84-6.56,1.84" />
                        <path
                          d="M605.1,47.79A15.9,15.9,0,0,1,597.45,46l1.42-3.47A10.54,10.54,0,0,0,604.4,44c2.77,0,5-1.78,5-3.94,0-6-11.1-3.2-11.1-11.47,0-3.76,3.37-7.42,8.85-7.42a13.49,13.49,0,0,1,7.1,1.83l-1.42,3.14a8.42,8.42,0,0,0-4.63-1.45c-2.8,0-4.53,1.69-4.53,3.62,0,5.64,11.32,3.14,11.32,11.6,0,4-3.85,7.9-9.89,7.9" />
                      </g>
                    </svg>
                  </div>
                  <div class="ons-header__org-logo ons-header__org-logo--small">
                    <svg class="ons-icon--logo" xmlns="http://www.w3.org/2000/svg" width="120" height="27"
                      viewBox="0 5 595 116" aria-labelledby="ons-logo-stacked-en-alt">
                      <title id="ons-logo-stacked-en-alt">Office for National Statistics logo</title>
                      <g class="ons-icon--logo__group ons-icon--logo__group--secondary" fill="#a8bd3a">
                        <path
                          d="M0,70.5c1.8-3.7,3.6-7.2,5.6-10.7A127.94,127.94,0,0,1,0,42.6V70.5M10.9,0S0,0,0,13.5v7.2A128.06,128.06,0,0,0,7.9,56.2a114.75,114.75,0,0,1,22.3-26C47.8,15.1,71.5,4.7,103.7.1Z" />
                      </g>
                      <g class="ons-icon--logo__group ons-icon--logo__group--primary" fill="#003c57">
                        <path
                          d="M115.9,7.3c-36.8,3.5-62,14-80,29.4a108.15,108.15,0,0,0-23.6,29c14.1,27.4,41.1,47.6,86,50.5h4.4s13.8.5,13.8-14.9V7.2l-.6.1M21.2,85.4a92.68,92.68,0,0,1-11-16A173,173,0,0,0,0,93.4v22.7l73.6.1c-22.9-5.5-40.1-16.4-52.4-30.8" />
                      </g>
                      <g class="ons-icon--logo__group ons-icon--logo__group--text" fill="#003c57">
                        <path
                          d="M161,51.9c-11.3,0-16.3-9.3-16.3-20.8s5-20.8,16.3-20.8,16.3,9.5,16.3,20.8c-.1,11.5-5.1,20.8-16.3,20.8m0-38.3c-8.3,0-11.3,9.1-11.3,17.4s2.7,17.3,11.3,17.3,11.2-9.1,11.2-17.3S169.3,13.6,161,13.6m30.2,8.9V51.2h-4.5V22.6H182V19.8h4.7V15.2c0-5.7,3.4-9.9,10-9.9a8,8,0,0,1,1.1.1V8.3h-.5c-3.2,0-6,2.1-6,6.4v5.1h6.6v2.8l-6.7-.1Zm18.9,0V51.2h-4.5V22.6h-4.7V19.8h4.7V15.2c0-5.7,3.4-9.9,10-9.9a8,8,0,0,1,1.1.1V8.3h-.5c-3.2,0-6,2.1-6,6.4v5.1h6.6v2.8l-6.7-.1Zm14-8.8a2.82,2.82,0,0,1-2.9-2.8,2.9,2.9,0,0,1,5.8,0,2.76,2.76,0,0,1-2.9,2.8m-2.3,6h4.6V51.2h-4.6Zm24.3,32.2c-7.4,0-13.2-6.4-13.2-16.5,0-10.3,5.8-16.5,13.4-16.5a12.36,12.36,0,0,1,7.7,2.2l-1.2,2.8a8.92,8.92,0,0,0-5.5-1.7c-6.4,0-9.7,5.5-9.7,13,0,7.7,3.7,13.2,9.5,13.2a9.8,9.8,0,0,0,5.6-1.7l1.2,3c-1.3,1.2-4,2.2-7.8,2.2m15.3-14.6c.6,7.4,4.7,11.1,11.1,11.1a18.36,18.36,0,0,0,8.5-1.9l1.3,3.2a22.58,22.58,0,0,1-10.2,2.1c-8.8,0-15.1-5.3-15.1-16.6,0-10.8,5.8-16.4,13.7-16.4s12.9,4.9,12.9,15.4l-22.2,3.1ZM270.5,22c-5.1,0-9.4,4-9.3,12.8l17.9-2.5C279,25,275.5,22,270.5,22m42.2.5V51.2h-4.5V22.6h-4.7V19.8h4.7V15.2c0-5.7,3.4-9.9,10-9.9a8,8,0,0,1,1.1.1V8.3h-.5c-3.2,0-6,2.1-6,6.4v5.1h6.6v2.8Zm23.2,29.4c-9.3,0-13.5-7.2-13.5-16.5s4.2-16.5,13.5-16.5,13.5,7.2,13.5,16.5-4.2,16.5-13.5,16.5m0-29.8c-6.9,0-8.8,7-8.8,13.4s2.1,13.1,8.8,13.1c6.9,0,8.9-6.6,8.9-13.1s-2-13.4-8.9-13.4m33.3.6c-2.9-.8-7.1-.6-9.1.6V51.2h-4.6V21.1c3.3-1.4,6.6-2.2,12.5-2.2h2.4c0,.1-1.2,3.8-1.2,3.8ZM171.3,114.8,153.5,87.3c-1.3-2.1-2.3-4.1-2.3-4.1h-.1s.2,2.3.2,4.8v26.8h-5.8V74.7h6.6L169,100.5a46.13,46.13,0,0,1,2.4,4.1h.1s-.2-2.3-.2-4.7V74.6h5.9v40.1l-5.9.1Zm25,.8c-9.2,0-13.6-3.7-13.6-9.7,0-8.5,8.8-10.7,19.4-11.7V92.4c0-4.3-2.9-5.6-7.2-5.6a22.34,22.34,0,0,0-8.5,1.8l-1.6-3.8a30.2,30.2,0,0,1,11.3-2.3c7,0,12.3,2.9,12.3,10.9v19.9c-2.7,1.4-6.9,2.3-12.1,2.3m5.8-18.2c-7.8.8-13,2.3-13,8.3,0,4.2,3,6.1,7.7,6.1a12.33,12.33,0,0,0,5.3-1.1Zm24.5,18.1c-6.6,0-9.1-4.3-9.1-8.5V87.5h-4.4V83.4h4.4v-7l6.7-1.9v8.9h6.1v4.1h-6.1v19.2c0,2.5,1.4,4.4,4.3,4.4a5.66,5.66,0,0,0,1.8-.3v4.1a11.47,11.47,0,0,1-3.7.6M239,77.9a3.52,3.52,0,1,1,3.9-3.5,3.71,3.71,0,0,1-3.9,3.5m-3.4,5.5h6.8v31.4h-6.8Zm26.9,32.2c-9.6,0-14.4-7.1-14.4-16.5s4.8-16.6,14.4-16.6,14.3,7.2,14.3,16.6-4.7,16.5-14.3,16.5m0-28.7c-5.8,0-7.5,6.1-7.5,12.2s1.8,11.9,7.5,11.9,7.5-5.8,7.5-11.9-1.7-12.2-7.5-12.2m39.3,27.9V92.3c0-4-3.4-5.5-7.3-5.5a16,16,0,0,0-5.4.9v27.1h-6.7v-30a32.8,32.8,0,0,1,12.5-2.3c8.2,0,13.7,2.8,13.7,9.7v22.6Zm25.7.8c-9.2,0-13.6-3.7-13.6-9.7,0-8.5,8.9-10.7,19.4-11.7V92.4c0-4.3-2.9-5.6-7.2-5.6a22.34,22.34,0,0,0-8.5,1.8L316,84.8a30.2,30.2,0,0,1,11.3-2.3c7,0,12.3,2.9,12.3,10.9v19.9c-2.7,1.4-6.9,2.3-12.1,2.3m5.8-18.2c-7.8.8-13,2.3-13,8.3,0,4.2,3,6.1,7.7,6.1a12.33,12.33,0,0,0,5.3-1.1Zm13.2,17.4V69h6.7v45.8Zm38.6.8a23.94,23.94,0,0,1-10.9-2.3l1.9-4.9a17,17,0,0,0,7.7,1.9c4.7,0,8-2.7,8-6.7,0-8.8-16.7-5.4-16.7-17.9,0-6.4,5.2-11.9,13.3-11.9a20.22,20.22,0,0,1,9.7,2.3l-1.7,4.4a14.57,14.57,0,0,0-7-1.9c-4.3,0-7.2,2.6-7.2,6.4,0,8.6,17.1,4.9,17.1,18.2-.1,7.1-6,12.4-14.2,12.4m31.1-.1c-6.6,0-9.1-4.3-9.1-8.5V87.5h-4.4V83.4h4.4v-7l6.7-1.9v8.9h6.1v4.1h-6.1v19.2a4.07,4.07,0,0,0,4.3,4.4,5.66,5.66,0,0,0,1.8-.3v4.1a12.06,12.06,0,0,1-3.7.6m20.9.1c-9.2,0-13.6-3.7-13.6-9.7,0-8.5,8.9-10.7,19.4-11.7V92.4c0-4.3-2.9-5.6-7.2-5.6a22.34,22.34,0,0,0-8.5,1.8l-1.6-3.8a30.2,30.2,0,0,1,11.3-2.3c7,0,12.3,2.9,12.3,10.9v19.9c-2.6,1.4-6.9,2.3-12.1,2.3m5.8-18.2c-7.8.8-13,2.3-13,8.3,0,4.2,3,6.1,7.7,6.1a12.33,12.33,0,0,0,5.3-1.1Zm24.6,18.1c-6.6,0-9.1-4.3-9.1-8.5V87.5H454V83.4h4.4v-7l6.7-1.9v8.9h6.1v4.1h-6.1v19.2a4.07,4.07,0,0,0,4.3,4.4,5.66,5.66,0,0,0,1.8-.3v4.1a12.69,12.69,0,0,1-3.7.6m12.3-37.6a3.52,3.52,0,1,1,3.9-3.5,3.65,3.65,0,0,1-3.9,3.5m-3.4,5.5h6.8v31.4h-6.8Zm21.4,32.2a19.46,19.46,0,0,1-9.5-2.3l1.8-4.3a13.21,13.21,0,0,0,6.9,1.9c3.4,0,6.2-2.2,6.2-4.9,0-7.5-13.8-4-13.8-14.2,0-4.7,4.2-9.2,11-9.2a16.21,16.21,0,0,1,8.8,2.3l-1.8,3.9a10.31,10.31,0,0,0-5.7-1.8c-3.5,0-5.6,2.1-5.6,4.5,0,7,14,3.9,14,14.4,0,4.9-4.7,9.7-12.3,9.7m29.4-.1c-6.6,0-9.1-4.3-9.1-8.5V87.5h-4.4V83.4h4.4v-7l6.7-1.9v8.9h6.1v4.1h-6.1v19.2c0,2.5,1.4,4.4,4.3,4.4a5.66,5.66,0,0,0,1.8-.3v4.1a12.06,12.06,0,0,1-3.7.6m12.3-37.6a3.52,3.52,0,1,1,3.9-3.5c.1,2-1.7,3.5-3.9,3.5m-3.3,5.5H543v31.4h-6.8Zm26.2,32.2c-7.7,0-13.6-6.3-13.6-16.6s6.1-16.5,13.7-16.5c3.9,0,6.6,1.1,8,2.3L569,88.6a8.61,8.61,0,0,0-4.9-1.5c-5.5,0-8.3,4.7-8.3,11.8s3.3,11.9,8.2,11.9a8.39,8.39,0,0,0,4.9-1.6l1.7,4.1c-1.5,1.2-4.2,2.3-8.2,2.3m20.6,0a19.46,19.46,0,0,1-9.5-2.3l1.8-4.3a13.21,13.21,0,0,0,6.9,1.9c3.4,0,6.2-2.2,6.2-4.9,0-7.5-13.8-4-13.8-14.2,0-4.7,4.2-9.2,11-9.2a16.85,16.85,0,0,1,8.9,2.3l-1.8,3.9A10.31,10.31,0,0,0,587,87c-3.5,0-5.6,2.1-5.6,4.5,0,7,14,3.9,14,14.4-.1,4.9-4.9,9.7-12.4,9.7" />
                      </g>
                    </svg>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="ons-header__main">
            <div class="ons-container">
              <div
                class="ons-grid ons-grid--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap">
                <div class="ons-grid__col ons-col-auto ons-u-flex-shrink">
                  <div class="ons-header__title">Question example</div>
                </div>
              </div>
            </div>
          </div>
        </header>
        <div class="ons-page__container ons-container">
          <nav class="ons-breadcrumbs" aria-label="Breadcrumbs">
            <ol class="ons-breadcrumbs__items ons-u-fs-s">
              <li class="ons-breadcrumbs__item" id="breadcrumb-1">
                <a class="ons-breadcrumbs__link" href="#0">Previous</a>
                <svg class="ons-icon" viewBox="0 0 8 13" xmlns="http://www.w3.org/2000/svg" focusable="false"
                  fill="currentColor">
                  <path
                    d="M5.74,14.28l-.57-.56a.5.5,0,0,1,0-.71h0l5-5-5-5a.5.5,0,0,1,0-.71h0l.57-.56a.5.5,0,0,1,.71,0h0l5.93,5.93a.5.5,0,0,1,0,.7L6.45,14.28a.5.5,0,0,1-.71,0Z"
                    transform="translate(-5.02 -1.59)" />
                </svg>
              </li>
            </ol>
          </nav>
          <div class="ons-grid">
            <div class="ons-grid__col ons-col-12@m ">
              <main id="main-content" class="ons-page__main ">
                <div class="ons-question ons-u-mb-l">
                  <h1 id="question-title" class="ons-question__title">On 1 May 2016, what was the number of employees
                    for Bolt and Ratchet?</h1>
                  <div class="ons-question__description ons-u-mb-m">
                    <p>This is all employees aged 16 years or over that your organisation employs</p>
                  </div>
                  <details id="" class="ons-details ons-js-details ons-u-mb-m">
                    <summary class="ons-details__heading ons-js-details-heading">
                      <h2 class="ons-details__title">What we mean by “employee”</h2>
                      <span class="ons-details__icon">
                        <svg class="ons-icon" viewBox="0 0 8 13" xmlns="http://www.w3.org/2000/svg" focusable="false"
                          fill="currentColor">
                          <path
                            d="M5.74,14.28l-.57-.56a.5.5,0,0,1,0-.71h0l5-5-5-5a.5.5,0,0,1,0-.71h0l.57-.56a.5.5,0,0,1,.71,0h0l5.93,5.93a.5.5,0,0,1,0,.7L6.45,14.28a.5.5,0,0,1-.71,0Z"
                            transform="translate(-5.02 -1.59)" />
                        </svg>
                      </span>
                    </summary>
                    <div id="-content" class="ons-details__content ons-js-details-content">
                      <p>An employee is a person that your organisation directly pays from its payroll(s), in return for
                        carrying out a full-time or part-time job</p>
                    </div>
                  </details>
                  <div class="ons-panel ons-panel--info ons-panel--no-title ons-question-guidance ons-u-mb-m">
                    <span class="ons-panel__assistive-text ons-u-vh">Important information: </span>
                    <div class="ons-panel__body">
                      <h2 class="ons-question-guidance__list-heading ons-u-fs-r--b">Include:</h2>
                      <ul class="ons-list">
                        <li class="ons-list__item"> all employees in Great Britain (England, Scotland and Wales), both
                          full and part-time, who received pay in the relevant period </li>
                      </ul>
                      <h2 class="ons-question-guidance__list-heading ons-u-fs-r--b">Exclude:</h2>
                      <ul class="ons-list">
                        <li class="ons-list__item"> trainees on government schemes </li>
                        <li class="ons-list__item"> employees working abroad unless paid directly from this business’s
                          GB payroll </li>
                      </ul>
                    </div>
                  </div>
                  <div class="ons-question__answer ons-u-mb-m">
                    <fieldset id="number-of-employees" class="ons-fieldset">
                      <legend class="ons-fieldset__legend ons-u-vh"><span
                          class="ons-fieldset__legend-title ons-u-pb-no">On 1 May 2016, what was the number of employees
                          for Bolt and Ratchet?</span></legend>
                      <div class="ons-radios__items">
                        <span class="ons-radios__item">
                          <span class="ons-radio">
                            <input type="radio" id="number-of-employees-1-9" class="ons-radio__input ons-js-radio"
                              value="1-9" name="number-of-employees">
                            <label class=" ons-radio__label " for="number-of-employees-1-9"
                              id="number-of-employees-1-9-label">1 – 9 employees</label>
                          </span>
                        </span>
                        <br>
                        <span class="ons-radios__item">
                          <span class="ons-radio">
                            <input type="radio" id="number-of-employees-10-49" class="ons-radio__input ons-js-radio"
                              value="10-49" name="number-of-employees">
                            <label class=" ons-radio__label " for="number-of-employees-10-49"
                              id="number-of-employees-10-49-label">10 – 49 employees</label>
                          </span>
                        </span>
                        <br>
                        <span class="ons-radios__item">
                          <span class="ons-radio">
                            <input type="radio" id="number-of-employees-50-100" class="ons-radio__input ons-js-radio"
                              value="50-100" name="number-of-employees">
                            <label class=" ons-radio__label  ons-label--with-description"
                              aria-describedby="number-of-employees-50-100-label-description-hint"
                              for="number-of-employees-50-100" id="number-of-employees-50-100-label">50 – 100+
                              employees<span class="ons-label__aria-hidden-description" aria-hidden="true">
                                <span class="ons-label__description ons-radio__label--with-description">Include
                                  multi-corporations</span></span></label>
                            <span class="ons-label__visually-hidden-description ons-u-vh"
                              id="number-of-employees-50-100-label-description-hint">Include multi-corporations</span>
                          </span>
                        </span>
                      </div>
                    </fieldset>
                  </div>
                  <details id="" class="ons-details ons-js-details ons-u-mb-m">
                    <summary class="ons-details__heading ons-js-details-heading">
                      <h2 class="ons-details__title">Why we ask this question</h2>
                      <span class="ons-details__icon">
                        <svg class="ons-icon" viewBox="0 0 8 13" xmlns="http://www.w3.org/2000/svg" focusable="false"
                          fill="currentColor">
                          <path
                            d="M5.74,14.28l-.57-.56a.5.5,0,0,1,0-.71h0l5-5-5-5a.5.5,0,0,1,0-.71h0l.57-.56a.5.5,0,0,1,.71,0h0l5.93,5.93a.5.5,0,0,1,0,.7L6.45,14.28a.5.5,0,0,1-.71,0Z"
                            transform="translate(-5.02 -1.59)" />
                        </svg>
                      </span>
                    </summary>
                    <div id="-content" class="ons-details__content ons-js-details-content">
                      <p>We ask this question in order to understand the size of organisations in the UK</p>
                    </div>
                  </details>
                </div>
                <button type="submit" class="ons-btn">
                  <span class="ons-btn__inner"><span class="ons-btn__text">Save and continue</span>
                  </span>
                </button>
              </main>
            </div>
          </div>
        </div>
      </div>
    </div>
    <script>
      (function() {
        var s = ['https://cdn.ons.gov.uk/sdc/design-system/65.2.3/scripts/main.js'],
          c = document.createElement('script');
        if (!('noModule' in c)) {
          for (var i = 0; i < s.length; i++) {
            s[i] = s[i].replace('.js', '.es5.js');
          }
        }
        for (var i = 0; i < s.length; i++) {
          var e = document.createElement('script');
          e.src = s[i];
          document.body.appendChild(e);
        }
      })();
    </script>
    <div class="embeddable"></div>
    <style>
      body {
        height: auto;
      }
    </style>
    <script src="/js/main.js?t=1694002367554"></script>
  </body>

</html>

Question without a fieldset

Example: Question without a fieldset contents

Nunjucks

{% extends "layout/_template.njk" %}
{% from "components/question/_macro.njk" import onsQuestion %}
{% from "components/input/_macro.njk" import onsInput %}

{% set pageConfig = {
    "header": {
        "title": "Question example"
    },
    "breadcrumbs": {
        "ariaLabel": 'Breadcrumbs',
        "itemsList": [
            {
                "url": '#0',
                "text": 'Previous'
            }
        ]
    }
} %}

{% block main %}
    {% call onsQuestion({
        "title": "How many visitors are staying overnight at 3 Severn Road on 13 May 2019?",
        "description": "<p>Enter “0” if there are no visitors staying overnight</p>",
        "justification": {
            "title": "Why we ask this question",
            "content": "<p>Visitor information is collected to ensure that everyone is counted, in order to produce accurate estimates of the population, to facilitate effective planning and funding decisions.</p>"
        },
        "submitButton": true
    }) %}
        {{ onsInput({
            "id": "number-of-visitors",
            "name": "number-of-visitors",
            "type": "number",
            "width": "2",
            "label": {
                "text": "Number of visitors"
            }
        }) }}
    {% endcall %}
{% endblock %}

      {% block scripts %}
        {% from "components/embeddable/macro.njk" import embeddable %}
        {{ embeddable() }}

        <style>
          body {
            height: auto;
          }
        </style>

        <script src="{{ site.baseUrl }}js/main.js?t={{ cacheTime }}"></script>
      {% endblock %}
    

Nunjucks macro options

NameTypeRequiredDescription
titlestringtrueThe question heading
descriptionstringfalseThe question description to be used to provide added context to the question. This can contain HTML.
instructionstringfalseAn interviewer instruction. This can contain HTML.
definition<Object>QuestionDefinitionfalseSettings for the question definition to be used to define a word or acronym that is in the question
guidance<Object>QuestionGuidancefalseSettings for the question guidance to be used to state what should be included or excluded from the answer
justification<Object>QuestionJustificationfalseSettings for the question justification to be used to explain why a question is being asked
submitButton<Object>SubmitButton or booleanfalseSettings for the submit button. If a value of true is provided, default attributes will be used.
idstringfalseThe HTML id for the component
classesstringfalseClasses to add the component
attributesobjectfalseHTML attributes (for example, data attributes) to add to the component
readDescriptionFirstbooleanfalseSet to “true” to make screen readers read out question description first. Used in the relationships pattern where the description instructs the user to complete the sentence in the heading.
legendIsQuestionTitlebooleantrue (unless legend is set)Creates an h1 inside the legend. Use when there is only a single fieldset on the page
legendClassesstringfalseClasses to apply to the HTML legend element when using legendIsQuestionTitle
legendTitleClassesstringfalseClasses to apply to the h1 heading element when using legendIsQuestionTitle

QuestionDefinition

NameTypeRequiredDescription
idstringtrueThe HTML id of the question definition details
titlestringtrueThe title of the question definition details
contentstringtrueThe content of the question definition details. This can contain HTML.

QuestionGuidance

NameTypeRequiredDescription
contentstringfalseThe contents of the question guidance panel. This can contain HTML.
listsArray<GuidanceLists>falseAn array of lists with sub-headings used to state what should be included or excluded from the answer

GuidanceLists

NameTypeRequiredDescription
listHeadingstringfalseA heading for each include/exclude list
listLeadingLinestringfalseA leading line for each list
itemsListList (ref)trueAn array of list items for each list

QuestionJustification

NameTypeRequiredDescription
idstringtrueThe HTML id of the question justification details
titlestringfalseThe title of the question justification details. Defaults to “Why we ask this question”.
contentstringtrueThe content of the question definition details. This can contain HTML.

SubmitButton

NameTypeRequiredDescription
idstringfalseThe HTML id of the button
variantsstringfalseIf set to “timer” the button will be disabled for a short time to stop double-clicks from submitting the form twice. Setting to “loader” will disable the button when selected and show an animated loading icon.
textstringfalseText for the button label. Defaults to “Save and continue”.
classesstringfalseClasses to add the button element
attributesobjectfalseHTML attributes (for example, data attributes) to add to the button

HTML

<!doctype html>
<html lang="en">

  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Example: Question without a fieldset</title>
    <link rel="stylesheet" href="https://cdn.ons.gov.uk/sdc/design-system/65.2.3/css/main.css">
    <link rel="stylesheet" media="print" href="https://cdn.ons.gov.uk/sdc/design-system/65.2.3/css/print.css">
    <meta name="theme-color" content="#206095" />
    <!-- Open Graph -->
    <meta property="og:type" content="website">
    <meta property="og:url" content="">
    <meta property="og:title" content="">
    <meta property="og:image" content="https://cdn.ons.gov.uk/sdc/design-system/65.2.3/favicons/opengraph.png">
    <meta property="og:image:type" content="image/png">
    <meta property="og:image:width" content="1200">
    <meta property="og:image:height" content="630">
    <meta property="og:description" content="">
    <meta property="og:site_name" content="Question example">
    <meta property="og:locale" content="en">
    <!-- Favicons -->
    <link rel="icon" type="image/x-icon" href="https://cdn.ons.gov.uk/sdc/design-system/65.2.3/favicons/favicon.ico">
    <link rel="icon" type="image/png" href="https://cdn.ons.gov.uk/sdc/design-system/65.2.3/favicons/favicon-32x32.png"
      sizes="32x32">
    <link rel="icon" type="image/png" href="https://cdn.ons.gov.uk/sdc/design-system/65.2.3/favicons/favicon-16x16.png"
      sizes="16x16">
    <link rel="mask-icon" href="https://cdn.ons.gov.uk/sdc/design-system/65.2.3/favicons/safari-pinned-tab.svg"
      color="#000000">
    <link rel="apple-touch-icon" type="image/png"
      href="https://cdn.ons.gov.uk/sdc/design-system/65.2.3/favicons/apple-touch-icon.png" sizes="180x180">
    <link rel="manifest" href="https://cdn.ons.gov.uk/sdc/design-system/65.2.3/favicons/manifest.json">
  </head>

  <body>
    <script>
      document.body.className = ((document.body.className) ? document.body.className + ' ons-js-enabled' :
        'ons-js-enabled');
    </script>
    <div class="ons-page">
      <div class="ons-page__content">
        <a class="ons-skip-to-content" href="#main-content">Skip to main content</a>
        <header class="ons-header " role="banner">
          <div class="ons-browser-banner">
            <div class="ons-container">
              <p class="ons-browser-banner__content"><span class="ons-browser-banner__lead">This website no longer
                  supports your browser.</span><span class="ons-browser-banner__cta"> You can <a
                    class="ons-browser-banner__link" href="https://www.ons.gov.uk/help/browsers">upgrade your browser to
                    the latest version</a>.</span></p>
            </div>
          </div>
          <div class="ons-header__top">
            <div class="ons-container">
              <div
                class="ons-header__grid-top ons-grid ons-grid--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap">
                <div class="ons-grid__col ons-col-auto">
                  <div class="ons-header__org-logo ons-header__org-logo--large">
                    <svg class="ons-icon--logo" xmlns="http://www.w3.org/2000/svg" width="197" height="19"
                      viewBox="33 2 552 60" aria-labelledby="ons-logo-en-alt">
                      <title id="ons-logo-en-alt">Office for National Statistics logo</title>
                      <g class="ons-icon--logo__group ons-icon--logo__group--secondary" fill="#a8bd3a">
                        <path
                          d="M0,34.6c.8-1.69,1.39-3,2.32-4.6A38.28,38.28,0,0,1,0,23.4V34.6M5,3S0,3,0,9.25v1A62.12,62.12,0,0,0,4.2,27a43.77,43.77,0,0,1,9.42-10.79C21.69,9.21,31.16,5.13,45.9,3Z" />
                      </g>
                      <g class="ons-icon--logo__group ons-icon--logo__group--primary" fill="#003c57">
                        <path
                          d="M53.06,6.42C36.2,8,24.68,12.92,16.43,20.07A41.46,41.46,0,0,0,6.4,32.2C12.87,44.93,28.88,57,46.6,57H47s6.32.21,6.32-6.91V6.36a1.22,1.22,0,0,1-.26.06M9.72,42.67a44.25,44.25,0,0,1-5-7.42A80.59,80.59,0,0,0,0,46.38V56.91L31.06,57c-9.83-3-15.74-7.64-21.34-14.3" />
                      </g>
                      <g class="ons-icon--logo__group ons-icon--logo__group--text" fill="#003c57">
                        <path
                          d="M82,47.49c-9.07,0-13.13-7.51-13.13-16.77S72.91,14,82,14s13.1,7.61,13.1,16.77S91.1,47.54,82,47.54m0-30.91c-6.69,0-9.07,7.33-9.07,14.05s2.16,13.9,9.07,13.9,9-7.28,9-13.9-2.34-14-9-14" />
                        <path
                          d="M106.36,23.81V46.88h-3.67V23.81H98.93V21.56h3.76V17.9c0-4.61,2.72-7.95,8.08-7.95.38,0,.86.05.86.05v2.35h-.43c-2.55,0-4.84,1.64-4.84,5.12v4.09h5.27v2.25Z" />
                        <path
                          d="M121.53,23.81V46.88h-3.67V23.81H114.1V21.56h3.76V17.9c0-4.61,2.72-7.95,8.08-7.95.38,0,.86.05.86.05v2.35h-.43c-2.55,0-4.84,1.64-4.84,5.12v4.09h5.27v2.25Z" />
                        <path
                          d="M132.85,16.72a2.28,2.28,0,0,1-2.33-2.23v0a2.34,2.34,0,0,1,4.67,0,2.28,2.28,0,0,1-2.3,2.26h0M131,21.56h3.71V46.88H131Z" />
                        <path
                          d="M150.53,47.49c-6,0-10.63-5.16-10.63-13.29S144.52,21,150.66,21a9.76,9.76,0,0,1,6.17,1.74l-1,2.25a7.53,7.53,0,0,0-4.4-1.36c-5.15,0-7.78,4.46-7.78,10.48,0,6.2,3,10.62,7.65,10.62a8,8,0,0,0,4.49-1.37l1,2.45a10.21,10.21,0,0,1-6.3,1.73" />
                        <path
                          d="M162.84,35.75c.48,6,3.76,9,8.9,9a14.66,14.66,0,0,0,6.88-1.55l1.08,2.59a18,18,0,0,1-8.22,1.73c-7.12,0-12.18-4.23-12.18-13.34,0-8.69,4.67-13.2,11-13.2s10.37,3.95,10.37,12.4Zm7.35-12.41c-4.1,0-7.56,3.2-7.52,10.29l14.39-2c0-5.87-2.81-8.32-6.87-8.32" />
                        <path
                          d="M198.57,23.81V46.88H194.9V23.81h-3.76V21.56h3.76V17.9c0-4.61,2.72-7.95,8.08-7.95.39,0,.87.05.87.05v2.35h-.44c-2.54,0-4.84,1.64-4.84,5.12v4.09h5.28v2.25Z" />
                        <path
                          d="M217.28,47.49c-7.47,0-10.89-5.78-10.89-13.24S209.81,21,217.28,21s10.85,5.82,10.85,13.3-3.37,13.24-10.85,13.24m0-24c-5.53,0-7.13,5.59-7.13,10.81s1.73,10.56,7.13,10.56,7.13-5.35,7.13-10.56-1.6-10.81-7.13-10.81" />
                        <path
                          d="M244.08,23.91c-2.34-.61-5.75-.52-7.35.47v22.5H233V22.69c2.67-1.13,5.36-1.74,10.11-1.74H245Z" />
                        <path
                          d="M277.42,47.13,263.07,25a32.2,32.2,0,0,1-1.85-3.29h-.09s.13,1.88.13,3.85V47.13h-4.71V14.8h5.31l13.61,20.82A28.76,28.76,0,0,1,277.38,39h.08s-.17-1.84-.17-3.77V14.8H282V47.13Z" />
                        <path
                          d="M297.52,47.79c-7.43,0-10.93-3-10.93-7.81,0-6.8,7.12-8.64,15.59-9.39V29.13c0-3.47-2.37-4.51-5.83-4.51a18,18,0,0,0-6.87,1.46L288.23,23a24,24,0,0,1,9.12-1.83c5.61,0,9.93,2.3,9.93,8.78V46a22.71,22.71,0,0,1-9.76,1.83m4.66-14.67c-6.26.67-10.45,1.84-10.45,6.73,0,3.42,2.42,4.88,6.22,4.88a10.09,10.09,0,0,0,4.23-.84Z" />
                        <path
                          d="M322,47.69c-5.31,0-7.34-3.43-7.34-6.86V25.09h-3.55V21.81h3.55V16.12l5.4-1.5v7.19H325v3.28h-5V40.55a3.26,3.26,0,0,0,3,3.52h.5a5.5,5.5,0,0,0,1.46-.23v3.33a7.69,7.69,0,0,1-3,.52" />
                        <path
                          d="M331.91,17.43a3,3,0,0,1-3.15-2.81,3.17,3.17,0,0,1,6.31,0,3,3,0,0,1-3.16,2.81m-2.72,4.38h5.44V47.13h-5.44Z" />
                        <path
                          d="M350.88,47.79c-7.73,0-11.57-5.74-11.57-13.3s3.84-13.34,11.57-13.34,11.54,5.78,11.54,13.34-3.8,13.3-11.54,13.3m0-23.17c-4.66,0-6.05,4.89-6.05,9.82s1.47,9.63,6.05,9.63,6.05-4.7,6.05-9.63-1.38-9.82-6.05-9.82" />
                        <path
                          d="M382.52,47.13V29c0-3.24-2.77-4.47-5.88-4.47a12.3,12.3,0,0,0-4.37.76v21.8h-5.39V23a26.81,26.81,0,0,1,10.06-1.83c6.61,0,11,2.25,11,7.8V47.13Z" />
                        <path
                          d="M403.18,47.79c-7.43,0-10.94-3-10.94-7.81,0-6.8,7.13-8.64,15.6-9.39V29.13c0-3.47-2.37-4.51-5.83-4.51a18,18,0,0,0-6.87,1.46L393.89,23A24,24,0,0,1,403,21.15c5.62,0,9.94,2.3,9.94,8.78V46a22.71,22.71,0,0,1-9.76,1.83m4.66-14.67c-6.27.67-10.46,1.84-10.46,6.73,0,3.42,2.43,4.88,6.23,4.88a10.09,10.09,0,0,0,4.23-.84Z" />
                        <polygon
                          points="418.52 47.13 418.52 34.91 418.52 10.25 423.92 10.25 423.92 22.76 423.92 47.13 418.52 47.13" />
                        <path
                          d="M445.39,47.79A19.11,19.11,0,0,1,436.58,46l1.51-4a13.48,13.48,0,0,0,6.22,1.55c3.76,0,6.44-2.21,6.44-5.41,0-7.09-13.44-4.36-13.44-14.42,0-5.13,4.15-9.59,10.72-9.59A15.82,15.82,0,0,1,455.8,16l-1.38,3.52a11.93,11.93,0,0,0-5.66-1.5c-3.5,0-5.79,2.11-5.79,5.12,0,7,13.74,3.94,13.74,14.65,0,5.74-4.71,10-11.32,10" />
                        <path
                          d="M470.41,47.69c-5.31,0-7.34-3.43-7.34-6.86V25.09h-3.54V21.81h3.54V16.12l5.4-1.5v7.19h4.92v3.28h-4.92V40.55a3.27,3.27,0,0,0,3,3.52h.48a5.12,5.12,0,0,0,1.46-.23v3.33a7.69,7.69,0,0,1-3,.52" />
                        <path
                          d="M487.27,47.79c-7.44,0-10.93-3-10.93-7.81,0-6.8,7.13-8.64,15.6-9.39V29.13c0-3.47-2.38-4.51-5.84-4.51a18,18,0,0,0-6.87,1.46L478,23a23.94,23.94,0,0,1,9.11-1.83c5.62,0,9.94,2.3,9.94,8.78V46a22.71,22.71,0,0,1-9.76,1.83M492,33.16c-6.27.67-10.46,1.84-10.46,6.73,0,3.42,2.42,4.88,6.22,4.88a10,10,0,0,0,4.24-.84Z" />
                        <path
                          d="M511.73,47.69c-5.32,0-7.35-3.43-7.35-6.86V25.09h-3.54V21.81h3.54V16.12l5.4-1.5v7.19h4.92v3.28h-4.92V40.55a3.26,3.26,0,0,0,3,3.52h.5a5.5,5.5,0,0,0,1.46-.23v3.33a7.69,7.69,0,0,1-3,.52" />
                        <path
                          d="M521.66,17.43a3,3,0,0,1-3.15-2.81,3.17,3.17,0,0,1,6.31,0,3,3,0,0,1-3.16,2.81m-2.72,4.38h5.45V47.13h-5.45Z" />
                        <path
                          d="M536.19,47.79A15.9,15.9,0,0,1,528.54,46L530,42.48a10.53,10.53,0,0,0,5.52,1.5c2.77,0,5-1.78,5-3.94,0-6-11.1-3.2-11.1-11.47,0-3.76,3.37-7.42,8.86-7.42A13.56,13.56,0,0,1,545.34,23l-1.42,3.14a8.47,8.47,0,0,0-4.62-1.45c-2.81,0-4.54,1.69-4.54,3.62,0,5.64,11.32,3.14,11.32,11.6,0,4-3.85,7.9-9.89,7.9" />
                        <path
                          d="M559.83,47.69c-5.31,0-7.35-3.43-7.35-6.86V25.09h-3.54V21.81h3.54V16.12l5.4-1.5v7.19h4.93v3.28h-4.93V40.55a3.27,3.27,0,0,0,3,3.52h.48a5.64,5.64,0,0,0,1.47-.23v3.33a7.72,7.72,0,0,1-3,.52" />
                        <path
                          d="M569.77,17.43a3,3,0,0,1-3.15-2.81,3.17,3.17,0,0,1,6.31,0,3,3,0,0,1-3.16,2.81m-2.72,4.38h5.44V47.13h-5.44Z" />
                        <path
                          d="M588.14,47.79c-6.23,0-11-5.08-11-13.35s4.88-13.29,11-13.29A10.51,10.51,0,0,1,594.66,23l-1.21,3a6.87,6.87,0,0,0-4-1.22c-4.4,0-6.69,3.81-6.69,9.49s2.63,9.59,6.61,9.59a6.74,6.74,0,0,0,4-1.28L594.7,46c-1.12.94-3.33,1.84-6.56,1.84" />
                        <path
                          d="M605.1,47.79A15.9,15.9,0,0,1,597.45,46l1.42-3.47A10.54,10.54,0,0,0,604.4,44c2.77,0,5-1.78,5-3.94,0-6-11.1-3.2-11.1-11.47,0-3.76,3.37-7.42,8.85-7.42a13.49,13.49,0,0,1,7.1,1.83l-1.42,3.14a8.42,8.42,0,0,0-4.63-1.45c-2.8,0-4.53,1.69-4.53,3.62,0,5.64,11.32,3.14,11.32,11.6,0,4-3.85,7.9-9.89,7.9" />
                      </g>
                    </svg>
                  </div>
                  <div class="ons-header__org-logo ons-header__org-logo--small">
                    <svg class="ons-icon--logo" xmlns="http://www.w3.org/2000/svg" width="120" height="27"
                      viewBox="0 5 595 116" aria-labelledby="ons-logo-stacked-en-alt">
                      <title id="ons-logo-stacked-en-alt">Office for National Statistics logo</title>
                      <g class="ons-icon--logo__group ons-icon--logo__group--secondary" fill="#a8bd3a">
                        <path
                          d="M0,70.5c1.8-3.7,3.6-7.2,5.6-10.7A127.94,127.94,0,0,1,0,42.6V70.5M10.9,0S0,0,0,13.5v7.2A128.06,128.06,0,0,0,7.9,56.2a114.75,114.75,0,0,1,22.3-26C47.8,15.1,71.5,4.7,103.7.1Z" />
                      </g>
                      <g class="ons-icon--logo__group ons-icon--logo__group--primary" fill="#003c57">
                        <path
                          d="M115.9,7.3c-36.8,3.5-62,14-80,29.4a108.15,108.15,0,0,0-23.6,29c14.1,27.4,41.1,47.6,86,50.5h4.4s13.8.5,13.8-14.9V7.2l-.6.1M21.2,85.4a92.68,92.68,0,0,1-11-16A173,173,0,0,0,0,93.4v22.7l73.6.1c-22.9-5.5-40.1-16.4-52.4-30.8" />
                      </g>
                      <g class="ons-icon--logo__group ons-icon--logo__group--text" fill="#003c57">
                        <path
                          d="M161,51.9c-11.3,0-16.3-9.3-16.3-20.8s5-20.8,16.3-20.8,16.3,9.5,16.3,20.8c-.1,11.5-5.1,20.8-16.3,20.8m0-38.3c-8.3,0-11.3,9.1-11.3,17.4s2.7,17.3,11.3,17.3,11.2-9.1,11.2-17.3S169.3,13.6,161,13.6m30.2,8.9V51.2h-4.5V22.6H182V19.8h4.7V15.2c0-5.7,3.4-9.9,10-9.9a8,8,0,0,1,1.1.1V8.3h-.5c-3.2,0-6,2.1-6,6.4v5.1h6.6v2.8l-6.7-.1Zm18.9,0V51.2h-4.5V22.6h-4.7V19.8h4.7V15.2c0-5.7,3.4-9.9,10-9.9a8,8,0,0,1,1.1.1V8.3h-.5c-3.2,0-6,2.1-6,6.4v5.1h6.6v2.8l-6.7-.1Zm14-8.8a2.82,2.82,0,0,1-2.9-2.8,2.9,2.9,0,0,1,5.8,0,2.76,2.76,0,0,1-2.9,2.8m-2.3,6h4.6V51.2h-4.6Zm24.3,32.2c-7.4,0-13.2-6.4-13.2-16.5,0-10.3,5.8-16.5,13.4-16.5a12.36,12.36,0,0,1,7.7,2.2l-1.2,2.8a8.92,8.92,0,0,0-5.5-1.7c-6.4,0-9.7,5.5-9.7,13,0,7.7,3.7,13.2,9.5,13.2a9.8,9.8,0,0,0,5.6-1.7l1.2,3c-1.3,1.2-4,2.2-7.8,2.2m15.3-14.6c.6,7.4,4.7,11.1,11.1,11.1a18.36,18.36,0,0,0,8.5-1.9l1.3,3.2a22.58,22.58,0,0,1-10.2,2.1c-8.8,0-15.1-5.3-15.1-16.6,0-10.8,5.8-16.4,13.7-16.4s12.9,4.9,12.9,15.4l-22.2,3.1ZM270.5,22c-5.1,0-9.4,4-9.3,12.8l17.9-2.5C279,25,275.5,22,270.5,22m42.2.5V51.2h-4.5V22.6h-4.7V19.8h4.7V15.2c0-5.7,3.4-9.9,10-9.9a8,8,0,0,1,1.1.1V8.3h-.5c-3.2,0-6,2.1-6,6.4v5.1h6.6v2.8Zm23.2,29.4c-9.3,0-13.5-7.2-13.5-16.5s4.2-16.5,13.5-16.5,13.5,7.2,13.5,16.5-4.2,16.5-13.5,16.5m0-29.8c-6.9,0-8.8,7-8.8,13.4s2.1,13.1,8.8,13.1c6.9,0,8.9-6.6,8.9-13.1s-2-13.4-8.9-13.4m33.3.6c-2.9-.8-7.1-.6-9.1.6V51.2h-4.6V21.1c3.3-1.4,6.6-2.2,12.5-2.2h2.4c0,.1-1.2,3.8-1.2,3.8ZM171.3,114.8,153.5,87.3c-1.3-2.1-2.3-4.1-2.3-4.1h-.1s.2,2.3.2,4.8v26.8h-5.8V74.7h6.6L169,100.5a46.13,46.13,0,0,1,2.4,4.1h.1s-.2-2.3-.2-4.7V74.6h5.9v40.1l-5.9.1Zm25,.8c-9.2,0-13.6-3.7-13.6-9.7,0-8.5,8.8-10.7,19.4-11.7V92.4c0-4.3-2.9-5.6-7.2-5.6a22.34,22.34,0,0,0-8.5,1.8l-1.6-3.8a30.2,30.2,0,0,1,11.3-2.3c7,0,12.3,2.9,12.3,10.9v19.9c-2.7,1.4-6.9,2.3-12.1,2.3m5.8-18.2c-7.8.8-13,2.3-13,8.3,0,4.2,3,6.1,7.7,6.1a12.33,12.33,0,0,0,5.3-1.1Zm24.5,18.1c-6.6,0-9.1-4.3-9.1-8.5V87.5h-4.4V83.4h4.4v-7l6.7-1.9v8.9h6.1v4.1h-6.1v19.2c0,2.5,1.4,4.4,4.3,4.4a5.66,5.66,0,0,0,1.8-.3v4.1a11.47,11.47,0,0,1-3.7.6M239,77.9a3.52,3.52,0,1,1,3.9-3.5,3.71,3.71,0,0,1-3.9,3.5m-3.4,5.5h6.8v31.4h-6.8Zm26.9,32.2c-9.6,0-14.4-7.1-14.4-16.5s4.8-16.6,14.4-16.6,14.3,7.2,14.3,16.6-4.7,16.5-14.3,16.5m0-28.7c-5.8,0-7.5,6.1-7.5,12.2s1.8,11.9,7.5,11.9,7.5-5.8,7.5-11.9-1.7-12.2-7.5-12.2m39.3,27.9V92.3c0-4-3.4-5.5-7.3-5.5a16,16,0,0,0-5.4.9v27.1h-6.7v-30a32.8,32.8,0,0,1,12.5-2.3c8.2,0,13.7,2.8,13.7,9.7v22.6Zm25.7.8c-9.2,0-13.6-3.7-13.6-9.7,0-8.5,8.9-10.7,19.4-11.7V92.4c0-4.3-2.9-5.6-7.2-5.6a22.34,22.34,0,0,0-8.5,1.8L316,84.8a30.2,30.2,0,0,1,11.3-2.3c7,0,12.3,2.9,12.3,10.9v19.9c-2.7,1.4-6.9,2.3-12.1,2.3m5.8-18.2c-7.8.8-13,2.3-13,8.3,0,4.2,3,6.1,7.7,6.1a12.33,12.33,0,0,0,5.3-1.1Zm13.2,17.4V69h6.7v45.8Zm38.6.8a23.94,23.94,0,0,1-10.9-2.3l1.9-4.9a17,17,0,0,0,7.7,1.9c4.7,0,8-2.7,8-6.7,0-8.8-16.7-5.4-16.7-17.9,0-6.4,5.2-11.9,13.3-11.9a20.22,20.22,0,0,1,9.7,2.3l-1.7,4.4a14.57,14.57,0,0,0-7-1.9c-4.3,0-7.2,2.6-7.2,6.4,0,8.6,17.1,4.9,17.1,18.2-.1,7.1-6,12.4-14.2,12.4m31.1-.1c-6.6,0-9.1-4.3-9.1-8.5V87.5h-4.4V83.4h4.4v-7l6.7-1.9v8.9h6.1v4.1h-6.1v19.2a4.07,4.07,0,0,0,4.3,4.4,5.66,5.66,0,0,0,1.8-.3v4.1a12.06,12.06,0,0,1-3.7.6m20.9.1c-9.2,0-13.6-3.7-13.6-9.7,0-8.5,8.9-10.7,19.4-11.7V92.4c0-4.3-2.9-5.6-7.2-5.6a22.34,22.34,0,0,0-8.5,1.8l-1.6-3.8a30.2,30.2,0,0,1,11.3-2.3c7,0,12.3,2.9,12.3,10.9v19.9c-2.6,1.4-6.9,2.3-12.1,2.3m5.8-18.2c-7.8.8-13,2.3-13,8.3,0,4.2,3,6.1,7.7,6.1a12.33,12.33,0,0,0,5.3-1.1Zm24.6,18.1c-6.6,0-9.1-4.3-9.1-8.5V87.5H454V83.4h4.4v-7l6.7-1.9v8.9h6.1v4.1h-6.1v19.2a4.07,4.07,0,0,0,4.3,4.4,5.66,5.66,0,0,0,1.8-.3v4.1a12.69,12.69,0,0,1-3.7.6m12.3-37.6a3.52,3.52,0,1,1,3.9-3.5,3.65,3.65,0,0,1-3.9,3.5m-3.4,5.5h6.8v31.4h-6.8Zm21.4,32.2a19.46,19.46,0,0,1-9.5-2.3l1.8-4.3a13.21,13.21,0,0,0,6.9,1.9c3.4,0,6.2-2.2,6.2-4.9,0-7.5-13.8-4-13.8-14.2,0-4.7,4.2-9.2,11-9.2a16.21,16.21,0,0,1,8.8,2.3l-1.8,3.9a10.31,10.31,0,0,0-5.7-1.8c-3.5,0-5.6,2.1-5.6,4.5,0,7,14,3.9,14,14.4,0,4.9-4.7,9.7-12.3,9.7m29.4-.1c-6.6,0-9.1-4.3-9.1-8.5V87.5h-4.4V83.4h4.4v-7l6.7-1.9v8.9h6.1v4.1h-6.1v19.2c0,2.5,1.4,4.4,4.3,4.4a5.66,5.66,0,0,0,1.8-.3v4.1a12.06,12.06,0,0,1-3.7.6m12.3-37.6a3.52,3.52,0,1,1,3.9-3.5c.1,2-1.7,3.5-3.9,3.5m-3.3,5.5H543v31.4h-6.8Zm26.2,32.2c-7.7,0-13.6-6.3-13.6-16.6s6.1-16.5,13.7-16.5c3.9,0,6.6,1.1,8,2.3L569,88.6a8.61,8.61,0,0,0-4.9-1.5c-5.5,0-8.3,4.7-8.3,11.8s3.3,11.9,8.2,11.9a8.39,8.39,0,0,0,4.9-1.6l1.7,4.1c-1.5,1.2-4.2,2.3-8.2,2.3m20.6,0a19.46,19.46,0,0,1-9.5-2.3l1.8-4.3a13.21,13.21,0,0,0,6.9,1.9c3.4,0,6.2-2.2,6.2-4.9,0-7.5-13.8-4-13.8-14.2,0-4.7,4.2-9.2,11-9.2a16.85,16.85,0,0,1,8.9,2.3l-1.8,3.9A10.31,10.31,0,0,0,587,87c-3.5,0-5.6,2.1-5.6,4.5,0,7,14,3.9,14,14.4-.1,4.9-4.9,9.7-12.4,9.7" />
                      </g>
                    </svg>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="ons-header__main">
            <div class="ons-container">
              <div
                class="ons-grid ons-grid--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap">
                <div class="ons-grid__col ons-col-auto ons-u-flex-shrink">
                  <div class="ons-header__title">Question example</div>
                </div>
              </div>
            </div>
          </div>
        </header>
        <div class="ons-page__container ons-container">
          <nav class="ons-breadcrumbs" aria-label="Breadcrumbs">
            <ol class="ons-breadcrumbs__items ons-u-fs-s">
              <li class="ons-breadcrumbs__item" id="breadcrumb-1">
                <a class="ons-breadcrumbs__link" href="#0">Previous</a>
                <svg class="ons-icon" viewBox="0 0 8 13" xmlns="http://www.w3.org/2000/svg" focusable="false"
                  fill="currentColor">
                  <path
                    d="M5.74,14.28l-.57-.56a.5.5,0,0,1,0-.71h0l5-5-5-5a.5.5,0,0,1,0-.71h0l.57-.56a.5.5,0,0,1,.71,0h0l5.93,5.93a.5.5,0,0,1,0,.7L6.45,14.28a.5.5,0,0,1-.71,0Z"
                    transform="translate(-5.02 -1.59)" />
                </svg>
              </li>
            </ol>
          </nav>
          <div class="ons-grid">
            <div class="ons-grid__col ons-col-12@m ">
              <main id="main-content" class="ons-page__main ">
                <div class="ons-question ons-u-mb-l">
                  <h1 id="question-title" class="ons-question__title">How many visitors are staying overnight at 3
                    Severn Road on 13 May 2019?</h1>
                  <div class="ons-question__description ons-u-mb-m">
                    <p>Enter “0” if there are no visitors staying overnight</p>
                  </div>
                  <div class="ons-question__answer ons-u-mb-m">
                    <div class="ons-field">
                      <label class="ons-label" for="number-of-visitors">Number of visitors</label>
                      <input type="text" id="number-of-visitors"
                        class="ons-input ons-input--text ons-input-type__input ons-input-number--w-2"
                        name="number-of-visitors" pattern="[0-9]*" inputmode="numeric" />
                    </div>
                  </div>
                  <details id="" class="ons-details ons-js-details ons-u-mb-m">
                    <summary class="ons-details__heading ons-js-details-heading">
                      <h2 class="ons-details__title">Why we ask this question</h2>
                      <span class="ons-details__icon">
                        <svg class="ons-icon" viewBox="0 0 8 13" xmlns="http://www.w3.org/2000/svg" focusable="false"
                          fill="currentColor">
                          <path
                            d="M5.74,14.28l-.57-.56a.5.5,0,0,1,0-.71h0l5-5-5-5a.5.5,0,0,1,0-.71h0l.57-.56a.5.5,0,0,1,.71,0h0l5.93,5.93a.5.5,0,0,1,0,.7L6.45,14.28a.5.5,0,0,1-.71,0Z"
                            transform="translate(-5.02 -1.59)" />
                        </svg>
                      </span>
                    </summary>
                    <div id="-content" class="ons-details__content ons-js-details-content">
                      <p>Visitor information is collected to ensure that everyone is counted, in order to produce
                        accurate estimates of the population, to facilitate effective planning and funding decisions.
                      </p>
                    </div>
                  </details>
                </div>
                <button type="submit" class="ons-btn">
                  <span class="ons-btn__inner"><span class="ons-btn__text">Save and continue</span>
                  </span>
                </button>
              </main>
            </div>
          </div>
        </div>
      </div>
    </div>
    <script>
      (function() {
        var s = ['https://cdn.ons.gov.uk/sdc/design-system/65.2.3/scripts/main.js'],
          c = document.createElement('script');
        if (!('noModule' in c)) {
          for (var i = 0; i < s.length; i++) {
            s[i] = s[i].replace('.js', '.es5.js');
          }
        }
        for (var i = 0; i < s.length; i++) {
          var e = document.createElement('script');
          e.src = s[i];
          document.body.appendChild(e);
        }
      })();
    </script>
    <div class="embeddable"></div>
    <style>
      body {
        height: auto;
      }
    </style>
    <script src="/js/main.js?t=1694002367554"></script>
  </body>

</html>

Question with an interviewer instruction

Example: Question with an interviewer instruction contents

Nunjucks

{% extends "layout/_template.njk" %}
{% from "components/question/_macro.njk" import onsQuestion %}
{% from "components/input/_macro.njk" import onsInput %}

{% set pageConfig = {
    "header": {
        "title": "Interviewer led question example"
    },
    "breadcrumbs": {
        "ariaLabel": 'Breadcrumbs',
        "itemsList": [
            {
                "url": '#0',
                "text": 'Previous'
            }
        ]
    }
} %}

{% block main %}
    {% call onsQuestion({
        "title": "How many visitors do you have staying overnight at 3 Severn Road on Sunday 21 March 2021?",
        "description": "<p>A visitor is anyone aged <strong>16 years or over</strong> who usually lives at another address. Enter “0” if there are no visitors staying overnight.</p>",
        "instruction": "<p>Tell respondent to turn to <strong>Showcard 2</strong> or show them the following Electronic Showcard</p>",
        "definition": {
            "title": "Electronic Showcard",
            "content": "<p>Visitor information is collected to ensure that everyone is counted, in order to produce accurate estimates of the population, to facilitate effective planning and funding decisions</p>"
        },
        "submitButton": true
    }) %}

        {{ onsInput({
            "id": "number-of-visitors",
            "name": "number-of-visitors",
            "type": "number",
            "width": "2",
            "label": {
                "text": "Number of visitors"
            }
        }) }}

    {% endcall %}
{% endblock %}

      {% block scripts %}
        {% from "components/embeddable/macro.njk" import embeddable %}
        {{ embeddable() }}

        <style>
          body {
            height: auto;
          }
        </style>

        <script src="{{ site.baseUrl }}js/main.js?t={{ cacheTime }}"></script>
      {% endblock %}
    

Nunjucks macro options

NameTypeRequiredDescription
titlestringtrueThe question heading
descriptionstringfalseThe question description to be used to provide added context to the question. This can contain HTML.
instructionstringfalseAn interviewer instruction. This can contain HTML.
definition<Object>QuestionDefinitionfalseSettings for the question definition to be used to define a word or acronym that is in the question
guidance<Object>QuestionGuidancefalseSettings for the question guidance to be used to state what should be included or excluded from the answer
justification<Object>QuestionJustificationfalseSettings for the question justification to be used to explain why a question is being asked
submitButton<Object>SubmitButton or booleanfalseSettings for the submit button. If a value of true is provided, default attributes will be used.
idstringfalseThe HTML id for the component
classesstringfalseClasses to add the component
attributesobjectfalseHTML attributes (for example, data attributes) to add to the component
readDescriptionFirstbooleanfalseSet to “true” to make screen readers read out question description first. Used in the relationships pattern where the description instructs the user to complete the sentence in the heading.
legendIsQuestionTitlebooleantrue (unless legend is set)Creates an h1 inside the legend. Use when there is only a single fieldset on the page
legendClassesstringfalseClasses to apply to the HTML legend element when using legendIsQuestionTitle
legendTitleClassesstringfalseClasses to apply to the h1 heading element when using legendIsQuestionTitle

QuestionDefinition

NameTypeRequiredDescription
idstringtrueThe HTML id of the question definition details
titlestringtrueThe title of the question definition details
contentstringtrueThe content of the question definition details. This can contain HTML.

QuestionGuidance

NameTypeRequiredDescription
contentstringfalseThe contents of the question guidance panel. This can contain HTML.
listsArray<GuidanceLists>falseAn array of lists with sub-headings used to state what should be included or excluded from the answer

GuidanceLists

NameTypeRequiredDescription
listHeadingstringfalseA heading for each include/exclude list
listLeadingLinestringfalseA leading line for each list
itemsListList (ref)trueAn array of list items for each list

QuestionJustification

NameTypeRequiredDescription
idstringtrueThe HTML id of the question justification details
titlestringfalseThe title of the question justification details. Defaults to “Why we ask this question”.
contentstringtrueThe content of the question definition details. This can contain HTML.

SubmitButton

NameTypeRequiredDescription
idstringfalseThe HTML id of the button
variantsstringfalseIf set to “timer” the button will be disabled for a short time to stop double-clicks from submitting the form twice. Setting to “loader” will disable the button when selected and show an animated loading icon.
textstringfalseText for the button label. Defaults to “Save and continue”.
classesstringfalseClasses to add the button element
attributesobjectfalseHTML attributes (for example, data attributes) to add to the button

HTML

<!doctype html>
<html lang="en">

  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Example: Question with an interviewer instruction</title>
    <link rel="stylesheet" href="https://cdn.ons.gov.uk/sdc/design-system/65.2.3/css/main.css">
    <link rel="stylesheet" media="print" href="https://cdn.ons.gov.uk/sdc/design-system/65.2.3/css/print.css">
    <meta name="theme-color" content="#206095" />
    <!-- Open Graph -->
    <meta property="og:type" content="website">
    <meta property="og:url" content="">
    <meta property="og:title" content="">
    <meta property="og:image" content="https://cdn.ons.gov.uk/sdc/design-system/65.2.3/favicons/opengraph.png">
    <meta property="og:image:type" content="image/png">
    <meta property="og:image:width" content="1200">
    <meta property="og:image:height" content="630">
    <meta property="og:description" content="">
    <meta property="og:site_name" content="Interviewer led question example">
    <meta property="og:locale" content="en">
    <!-- Favicons -->
    <link rel="icon" type="image/x-icon" href="https://cdn.ons.gov.uk/sdc/design-system/65.2.3/favicons/favicon.ico">
    <link rel="icon" type="image/png" href="https://cdn.ons.gov.uk/sdc/design-system/65.2.3/favicons/favicon-32x32.png"
      sizes="32x32">
    <link rel="icon" type="image/png" href="https://cdn.ons.gov.uk/sdc/design-system/65.2.3/favicons/favicon-16x16.png"
      sizes="16x16">
    <link rel="mask-icon" href="https://cdn.ons.gov.uk/sdc/design-system/65.2.3/favicons/safari-pinned-tab.svg"
      color="#000000">
    <link rel="apple-touch-icon" type="image/png"
      href="https://cdn.ons.gov.uk/sdc/design-system/65.2.3/favicons/apple-touch-icon.png" sizes="180x180">
    <link rel="manifest" href="https://cdn.ons.gov.uk/sdc/design-system/65.2.3/favicons/manifest.json">
  </head>

  <body>
    <script>
      document.body.className = ((document.body.className) ? document.body.className + ' ons-js-enabled' :
        'ons-js-enabled');
    </script>
    <div class="ons-page">
      <div class="ons-page__content">
        <a class="ons-skip-to-content" href="#main-content">Skip to main content</a>
        <header class="ons-header " role="banner">
          <div class="ons-browser-banner">
            <div class="ons-container">
              <p class="ons-browser-banner__content"><span class="ons-browser-banner__lead">This website no longer
                  supports your browser.</span><span class="ons-browser-banner__cta"> You can <a
                    class="ons-browser-banner__link" href="https://www.ons.gov.uk/help/browsers">upgrade your browser to
                    the latest version</a>.</span></p>
            </div>
          </div>
          <div class="ons-header__top">
            <div class="ons-container">
              <div
                class="ons-header__grid-top ons-grid ons-grid--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap">
                <div class="ons-grid__col ons-col-auto">
                  <div class="ons-header__org-logo ons-header__org-logo--large">
                    <svg class="ons-icon--logo" xmlns="http://www.w3.org/2000/svg" width="197" height="19"
                      viewBox="33 2 552 60" aria-labelledby="ons-logo-en-alt">
                      <title id="ons-logo-en-alt">Office for National Statistics logo</title>
                      <g class="ons-icon--logo__group ons-icon--logo__group--secondary" fill="#a8bd3a">
                        <path
                          d="M0,34.6c.8-1.69,1.39-3,2.32-4.6A38.28,38.28,0,0,1,0,23.4V34.6M5,3S0,3,0,9.25v1A62.12,62.12,0,0,0,4.2,27a43.77,43.77,0,0,1,9.42-10.79C21.69,9.21,31.16,5.13,45.9,3Z" />
                      </g>
                      <g class="ons-icon--logo__group ons-icon--logo__group--primary" fill="#003c57">
                        <path
                          d="M53.06,6.42C36.2,8,24.68,12.92,16.43,20.07A41.46,41.46,0,0,0,6.4,32.2C12.87,44.93,28.88,57,46.6,57H47s6.32.21,6.32-6.91V6.36a1.22,1.22,0,0,1-.26.06M9.72,42.67a44.25,44.25,0,0,1-5-7.42A80.59,80.59,0,0,0,0,46.38V56.91L31.06,57c-9.83-3-15.74-7.64-21.34-14.3" />
                      </g>
                      <g class="ons-icon--logo__group ons-icon--logo__group--text" fill="#003c57">
                        <path
                          d="M82,47.49c-9.07,0-13.13-7.51-13.13-16.77S72.91,14,82,14s13.1,7.61,13.1,16.77S91.1,47.54,82,47.54m0-30.91c-6.69,0-9.07,7.33-9.07,14.05s2.16,13.9,9.07,13.9,9-7.28,9-13.9-2.34-14-9-14" />
                        <path
                          d="M106.36,23.81V46.88h-3.67V23.81H98.93V21.56h3.76V17.9c0-4.61,2.72-7.95,8.08-7.95.38,0,.86.05.86.05v2.35h-.43c-2.55,0-4.84,1.64-4.84,5.12v4.09h5.27v2.25Z" />
                        <path
                          d="M121.53,23.81V46.88h-3.67V23.81H114.1V21.56h3.76V17.9c0-4.61,2.72-7.95,8.08-7.95.38,0,.86.05.86.05v2.35h-.43c-2.55,0-4.84,1.64-4.84,5.12v4.09h5.27v2.25Z" />
                        <path
                          d="M132.85,16.72a2.28,2.28,0,0,1-2.33-2.23v0a2.34,2.34,0,0,1,4.67,0,2.28,2.28,0,0,1-2.3,2.26h0M131,21.56h3.71V46.88H131Z" />
                        <path
                          d="M150.53,47.49c-6,0-10.63-5.16-10.63-13.29S144.52,21,150.66,21a9.76,9.76,0,0,1,6.17,1.74l-1,2.25a7.53,7.53,0,0,0-4.4-1.36c-5.15,0-7.78,4.46-7.78,10.48,0,6.2,3,10.62,7.65,10.62a8,8,0,0,0,4.49-1.37l1,2.45a10.21,10.21,0,0,1-6.3,1.73" />
                        <path
                          d="M162.84,35.75c.48,6,3.76,9,8.9,9a14.66,14.66,0,0,0,6.88-1.55l1.08,2.59a18,18,0,0,1-8.22,1.73c-7.12,0-12.18-4.23-12.18-13.34,0-8.69,4.67-13.2,11-13.2s10.37,3.95,10.37,12.4Zm7.35-12.41c-4.1,0-7.56,3.2-7.52,10.29l14.39-2c0-5.87-2.81-8.32-6.87-8.32" />
                        <path
                          d="M198.57,23.81V46.88H194.9V23.81h-3.76V21.56h3.76V17.9c0-4.61,2.72-7.95,8.08-7.95.39,0,.87.05.87.05v2.35h-.44c-2.54,0-4.84,1.64-4.84,5.12v4.09h5.28v2.25Z" />
                        <path
                          d="M217.28,47.49c-7.47,0-10.89-5.78-10.89-13.24S209.81,21,217.28,21s10.85,5.82,10.85,13.3-3.37,13.24-10.85,13.24m0-24c-5.53,0-7.13,5.59-7.13,10.81s1.73,10.56,7.13,10.56,7.13-5.35,7.13-10.56-1.6-10.81-7.13-10.81" />
                        <path
                          d="M244.08,23.91c-2.34-.61-5.75-.52-7.35.47v22.5H233V22.69c2.67-1.13,5.36-1.74,10.11-1.74H245Z" />
                        <path
                          d="M277.42,47.13,263.07,25a32.2,32.2,0,0,1-1.85-3.29h-.09s.13,1.88.13,3.85V47.13h-4.71V14.8h5.31l13.61,20.82A28.76,28.76,0,0,1,277.38,39h.08s-.17-1.84-.17-3.77V14.8H282V47.13Z" />
                        <path
                          d="M297.52,47.79c-7.43,0-10.93-3-10.93-7.81,0-6.8,7.12-8.64,15.59-9.39V29.13c0-3.47-2.37-4.51-5.83-4.51a18,18,0,0,0-6.87,1.46L288.23,23a24,24,0,0,1,9.12-1.83c5.61,0,9.93,2.3,9.93,8.78V46a22.71,22.71,0,0,1-9.76,1.83m4.66-14.67c-6.26.67-10.45,1.84-10.45,6.73,0,3.42,2.42,4.88,6.22,4.88a10.09,10.09,0,0,0,4.23-.84Z" />
                        <path
                          d="M322,47.69c-5.31,0-7.34-3.43-7.34-6.86V25.09h-3.55V21.81h3.55V16.12l5.4-1.5v7.19H325v3.28h-5V40.55a3.26,3.26,0,0,0,3,3.52h.5a5.5,5.5,0,0,0,1.46-.23v3.33a7.69,7.69,0,0,1-3,.52" />
                        <path
                          d="M331.91,17.43a3,3,0,0,1-3.15-2.81,3.17,3.17,0,0,1,6.31,0,3,3,0,0,1-3.16,2.81m-2.72,4.38h5.44V47.13h-5.44Z" />
                        <path
                          d="M350.88,47.79c-7.73,0-11.57-5.74-11.57-13.3s3.84-13.34,11.57-13.34,11.54,5.78,11.54,13.34-3.8,13.3-11.54,13.3m0-23.17c-4.66,0-6.05,4.89-6.05,9.82s1.47,9.63,6.05,9.63,6.05-4.7,6.05-9.63-1.38-9.82-6.05-9.82" />
                        <path
                          d="M382.52,47.13V29c0-3.24-2.77-4.47-5.88-4.47a12.3,12.3,0,0,0-4.37.76v21.8h-5.39V23a26.81,26.81,0,0,1,10.06-1.83c6.61,0,11,2.25,11,7.8V47.13Z" />
                        <path
                          d="M403.18,47.79c-7.43,0-10.94-3-10.94-7.81,0-6.8,7.13-8.64,15.6-9.39V29.13c0-3.47-2.37-4.51-5.83-4.51a18,18,0,0,0-6.87,1.46L393.89,23A24,24,0,0,1,403,21.15c5.62,0,9.94,2.3,9.94,8.78V46a22.71,22.71,0,0,1-9.76,1.83m4.66-14.67c-6.27.67-10.46,1.84-10.46,6.73,0,3.42,2.43,4.88,6.23,4.88a10.09,10.09,0,0,0,4.23-.84Z" />
                        <polygon
                          points="418.52 47.13 418.52 34.91 418.52 10.25 423.92 10.25 423.92 22.76 423.92 47.13 418.52 47.13" />
                        <path
                          d="M445.39,47.79A19.11,19.11,0,0,1,436.58,46l1.51-4a13.48,13.48,0,0,0,6.22,1.55c3.76,0,6.44-2.21,6.44-5.41,0-7.09-13.44-4.36-13.44-14.42,0-5.13,4.15-9.59,10.72-9.59A15.82,15.82,0,0,1,455.8,16l-1.38,3.52a11.93,11.93,0,0,0-5.66-1.5c-3.5,0-5.79,2.11-5.79,5.12,0,7,13.74,3.94,13.74,14.65,0,5.74-4.71,10-11.32,10" />
                        <path
                          d="M470.41,47.69c-5.31,0-7.34-3.43-7.34-6.86V25.09h-3.54V21.81h3.54V16.12l5.4-1.5v7.19h4.92v3.28h-4.92V40.55a3.27,3.27,0,0,0,3,3.52h.48a5.12,5.12,0,0,0,1.46-.23v3.33a7.69,7.69,0,0,1-3,.52" />
                        <path
                          d="M487.27,47.79c-7.44,0-10.93-3-10.93-7.81,0-6.8,7.13-8.64,15.6-9.39V29.13c0-3.47-2.38-4.51-5.84-4.51a18,18,0,0,0-6.87,1.46L478,23a23.94,23.94,0,0,1,9.11-1.83c5.62,0,9.94,2.3,9.94,8.78V46a22.71,22.71,0,0,1-9.76,1.83M492,33.16c-6.27.67-10.46,1.84-10.46,6.73,0,3.42,2.42,4.88,6.22,4.88a10,10,0,0,0,4.24-.84Z" />
                        <path
                          d="M511.73,47.69c-5.32,0-7.35-3.43-7.35-6.86V25.09h-3.54V21.81h3.54V16.12l5.4-1.5v7.19h4.92v3.28h-4.92V40.55a3.26,3.26,0,0,0,3,3.52h.5a5.5,5.5,0,0,0,1.46-.23v3.33a7.69,7.69,0,0,1-3,.52" />
                        <path
                          d="M521.66,17.43a3,3,0,0,1-3.15-2.81,3.17,3.17,0,0,1,6.31,0,3,3,0,0,1-3.16,2.81m-2.72,4.38h5.45V47.13h-5.45Z" />
                        <path
                          d="M536.19,47.79A15.9,15.9,0,0,1,528.54,46L530,42.48a10.53,10.53,0,0,0,5.52,1.5c2.77,0,5-1.78,5-3.94,0-6-11.1-3.2-11.1-11.47,0-3.76,3.37-7.42,8.86-7.42A13.56,13.56,0,0,1,545.34,23l-1.42,3.14a8.47,8.47,0,0,0-4.62-1.45c-2.81,0-4.54,1.69-4.54,3.62,0,5.64,11.32,3.14,11.32,11.6,0,4-3.85,7.9-9.89,7.9" />
                        <path
                          d="M559.83,47.69c-5.31,0-7.35-3.43-7.35-6.86V25.09h-3.54V21.81h3.54V16.12l5.4-1.5v7.19h4.93v3.28h-4.93V40.55a3.27,3.27,0,0,0,3,3.52h.48a5.64,5.64,0,0,0,1.47-.23v3.33a7.72,7.72,0,0,1-3,.52" />
                        <path
                          d="M569.77,17.43a3,3,0,0,1-3.15-2.81,3.17,3.17,0,0,1,6.31,0,3,3,0,0,1-3.16,2.81m-2.72,4.38h5.44V47.13h-5.44Z" />
                        <path
                          d="M588.14,47.79c-6.23,0-11-5.08-11-13.35s4.88-13.29,11-13.29A10.51,10.51,0,0,1,594.66,23l-1.21,3a6.87,6.87,0,0,0-4-1.22c-4.4,0-6.69,3.81-6.69,9.49s2.63,9.59,6.61,9.59a6.74,6.74,0,0,0,4-1.28L594.7,46c-1.12.94-3.33,1.84-6.56,1.84" />
                        <path
                          d="M605.1,47.79A15.9,15.9,0,0,1,597.45,46l1.42-3.47A10.54,10.54,0,0,0,604.4,44c2.77,0,5-1.78,5-3.94,0-6-11.1-3.2-11.1-11.47,0-3.76,3.37-7.42,8.85-7.42a13.49,13.49,0,0,1,7.1,1.83l-1.42,3.14a8.42,8.42,0,0,0-4.63-1.45c-2.8,0-4.53,1.69-4.53,3.62,0,5.64,11.32,3.14,11.32,11.6,0,4-3.85,7.9-9.89,7.9" />
                      </g>
                    </svg>
                  </div>
                  <div class="ons-header__org-logo ons-header__org-logo--small">
                    <svg class="ons-icon--logo" xmlns="http://www.w3.org/2000/svg" width="120" height="27"
                      viewBox="0 5 595 116" aria-labelledby="ons-logo-stacked-en-alt">
                      <title id="ons-logo-stacked-en-alt">Office for National Statistics logo</title>
                      <g class="ons-icon--logo__group ons-icon--logo__group--secondary" fill="#a8bd3a">
                        <path
                          d="M0,70.5c1.8-3.7,3.6-7.2,5.6-10.7A127.94,127.94,0,0,1,0,42.6V70.5M10.9,0S0,0,0,13.5v7.2A128.06,128.06,0,0,0,7.9,56.2a114.75,114.75,0,0,1,22.3-26C47.8,15.1,71.5,4.7,103.7.1Z" />
                      </g>
                      <g class="ons-icon--logo__group ons-icon--logo__group--primary" fill="#003c57">
                        <path
                          d="M115.9,7.3c-36.8,3.5-62,14-80,29.4a108.15,108.15,0,0,0-23.6,29c14.1,27.4,41.1,47.6,86,50.5h4.4s13.8.5,13.8-14.9V7.2l-.6.1M21.2,85.4a92.68,92.68,0,0,1-11-16A173,173,0,0,0,0,93.4v22.7l73.6.1c-22.9-5.5-40.1-16.4-52.4-30.8" />
                      </g>
                      <g class="ons-icon--logo__group ons-icon--logo__group--text" fill="#003c57">
                        <path
                          d="M161,51.9c-11.3,0-16.3-9.3-16.3-20.8s5-20.8,16.3-20.8,16.3,9.5,16.3,20.8c-.1,11.5-5.1,20.8-16.3,20.8m0-38.3c-8.3,0-11.3,9.1-11.3,17.4s2.7,17.3,11.3,17.3,11.2-9.1,11.2-17.3S169.3,13.6,161,13.6m30.2,8.9V51.2h-4.5V22.6H182V19.8h4.7V15.2c0-5.7,3.4-9.9,10-9.9a8,8,0,0,1,1.1.1V8.3h-.5c-3.2,0-6,2.1-6,6.4v5.1h6.6v2.8l-6.7-.1Zm18.9,0V51.2h-4.5V22.6h-4.7V19.8h4.7V15.2c0-5.7,3.4-9.9,10-9.9a8,8,0,0,1,1.1.1V8.3h-.5c-3.2,0-6,2.1-6,6.4v5.1h6.6v2.8l-6.7-.1Zm14-8.8a2.82,2.82,0,0,1-2.9-2.8,2.9,2.9,0,0,1,5.8,0,2.76,2.76,0,0,1-2.9,2.8m-2.3,6h4.6V51.2h-4.6Zm24.3,32.2c-7.4,0-13.2-6.4-13.2-16.5,0-10.3,5.8-16.5,13.4-16.5a12.36,12.36,0,0,1,7.7,2.2l-1.2,2.8a8.92,8.92,0,0,0-5.5-1.7c-6.4,0-9.7,5.5-9.7,13,0,7.7,3.7,13.2,9.5,13.2a9.8,9.8,0,0,0,5.6-1.7l1.2,3c-1.3,1.2-4,2.2-7.8,2.2m15.3-14.6c.6,7.4,4.7,11.1,11.1,11.1a18.36,18.36,0,0,0,8.5-1.9l1.3,3.2a22.58,22.58,0,0,1-10.2,2.1c-8.8,0-15.1-5.3-15.1-16.6,0-10.8,5.8-16.4,13.7-16.4s12.9,4.9,12.9,15.4l-22.2,3.1ZM270.5,22c-5.1,0-9.4,4-9.3,12.8l17.9-2.5C279,25,275.5,22,270.5,22m42.2.5V51.2h-4.5V22.6h-4.7V19.8h4.7V15.2c0-5.7,3.4-9.9,10-9.9a8,8,0,0,1,1.1.1V8.3h-.5c-3.2,0-6,2.1-6,6.4v5.1h6.6v2.8Zm23.2,29.4c-9.3,0-13.5-7.2-13.5-16.5s4.2-16.5,13.5-16.5,13.5,7.2,13.5,16.5-4.2,16.5-13.5,16.5m0-29.8c-6.9,0-8.8,7-8.8,13.4s2.1,13.1,8.8,13.1c6.9,0,8.9-6.6,8.9-13.1s-2-13.4-8.9-13.4m33.3.6c-2.9-.8-7.1-.6-9.1.6V51.2h-4.6V21.1c3.3-1.4,6.6-2.2,12.5-2.2h2.4c0,.1-1.2,3.8-1.2,3.8ZM171.3,114.8,153.5,87.3c-1.3-2.1-2.3-4.1-2.3-4.1h-.1s.2,2.3.2,4.8v26.8h-5.8V74.7h6.6L169,100.5a46.13,46.13,0,0,1,2.4,4.1h.1s-.2-2.3-.2-4.7V74.6h5.9v40.1l-5.9.1Zm25,.8c-9.2,0-13.6-3.7-13.6-9.7,0-8.5,8.8-10.7,19.4-11.7V92.4c0-4.3-2.9-5.6-7.2-5.6a22.34,22.34,0,0,0-8.5,1.8l-1.6-3.8a30.2,30.2,0,0,1,11.3-2.3c7,0,12.3,2.9,12.3,10.9v19.9c-2.7,1.4-6.9,2.3-12.1,2.3m5.8-18.2c-7.8.8-13,2.3-13,8.3,0,4.2,3,6.1,7.7,6.1a12.33,12.33,0,0,0,5.3-1.1Zm24.5,18.1c-6.6,0-9.1-4.3-9.1-8.5V87.5h-4.4V83.4h4.4v-7l6.7-1.9v8.9h6.1v4.1h-6.1v19.2c0,2.5,1.4,4.4,4.3,4.4a5.66,5.66,0,0,0,1.8-.3v4.1a11.47,11.47,0,0,1-3.7.6M239,77.9a3.52,3.52,0,1,1,3.9-3.5,3.71,3.71,0,0,1-3.9,3.5m-3.4,5.5h6.8v31.4h-6.8Zm26.9,32.2c-9.6,0-14.4-7.1-14.4-16.5s4.8-16.6,14.4-16.6,14.3,7.2,14.3,16.6-4.7,16.5-14.3,16.5m0-28.7c-5.8,0-7.5,6.1-7.5,12.2s1.8,11.9,7.5,11.9,7.5-5.8,7.5-11.9-1.7-12.2-7.5-12.2m39.3,27.9V92.3c0-4-3.4-5.5-7.3-5.5a16,16,0,0,0-5.4.9v27.1h-6.7v-30a32.8,32.8,0,0,1,12.5-2.3c8.2,0,13.7,2.8,13.7,9.7v22.6Zm25.7.8c-9.2,0-13.6-3.7-13.6-9.7,0-8.5,8.9-10.7,19.4-11.7V92.4c0-4.3-2.9-5.6-7.2-5.6a22.34,22.34,0,0,0-8.5,1.8L316,84.8a30.2,30.2,0,0,1,11.3-2.3c7,0,12.3,2.9,12.3,10.9v19.9c-2.7,1.4-6.9,2.3-12.1,2.3m5.8-18.2c-7.8.8-13,2.3-13,8.3,0,4.2,3,6.1,7.7,6.1a12.33,12.33,0,0,0,5.3-1.1Zm13.2,17.4V69h6.7v45.8Zm38.6.8a23.94,23.94,0,0,1-10.9-2.3l1.9-4.9a17,17,0,0,0,7.7,1.9c4.7,0,8-2.7,8-6.7,0-8.8-16.7-5.4-16.7-17.9,0-6.4,5.2-11.9,13.3-11.9a20.22,20.22,0,0,1,9.7,2.3l-1.7,4.4a14.57,14.57,0,0,0-7-1.9c-4.3,0-7.2,2.6-7.2,6.4,0,8.6,17.1,4.9,17.1,18.2-.1,7.1-6,12.4-14.2,12.4m31.1-.1c-6.6,0-9.1-4.3-9.1-8.5V87.5h-4.4V83.4h4.4v-7l6.7-1.9v8.9h6.1v4.1h-6.1v19.2a4.07,4.07,0,0,0,4.3,4.4,5.66,5.66,0,0,0,1.8-.3v4.1a12.06,12.06,0,0,1-3.7.6m20.9.1c-9.2,0-13.6-3.7-13.6-9.7,0-8.5,8.9-10.7,19.4-11.7V92.4c0-4.3-2.9-5.6-7.2-5.6a22.34,22.34,0,0,0-8.5,1.8l-1.6-3.8a30.2,30.2,0,0,1,11.3-2.3c7,0,12.3,2.9,12.3,10.9v19.9c-2.6,1.4-6.9,2.3-12.1,2.3m5.8-18.2c-7.8.8-13,2.3-13,8.3,0,4.2,3,6.1,7.7,6.1a12.33,12.33,0,0,0,5.3-1.1Zm24.6,18.1c-6.6,0-9.1-4.3-9.1-8.5V87.5H454V83.4h4.4v-7l6.7-1.9v8.9h6.1v4.1h-6.1v19.2a4.07,4.07,0,0,0,4.3,4.4,5.66,5.66,0,0,0,1.8-.3v4.1a12.69,12.69,0,0,1-3.7.6m12.3-37.6a3.52,3.52,0,1,1,3.9-3.5,3.65,3.65,0,0,1-3.9,3.5m-3.4,5.5h6.8v31.4h-6.8Zm21.4,32.2a19.46,19.46,0,0,1-9.5-2.3l1.8-4.3a13.21,13.21,0,0,0,6.9,1.9c3.4,0,6.2-2.2,6.2-4.9,0-7.5-13.8-4-13.8-14.2,0-4.7,4.2-9.2,11-9.2a16.21,16.21,0,0,1,8.8,2.3l-1.8,3.9a10.31,10.31,0,0,0-5.7-1.8c-3.5,0-5.6,2.1-5.6,4.5,0,7,14,3.9,14,14.4,0,4.9-4.7,9.7-12.3,9.7m29.4-.1c-6.6,0-9.1-4.3-9.1-8.5V87.5h-4.4V83.4h4.4v-7l6.7-1.9v8.9h6.1v4.1h-6.1v19.2c0,2.5,1.4,4.4,4.3,4.4a5.66,5.66,0,0,0,1.8-.3v4.1a12.06,12.06,0,0,1-3.7.6m12.3-37.6a3.52,3.52,0,1,1,3.9-3.5c.1,2-1.7,3.5-3.9,3.5m-3.3,5.5H543v31.4h-6.8Zm26.2,32.2c-7.7,0-13.6-6.3-13.6-16.6s6.1-16.5,13.7-16.5c3.9,0,6.6,1.1,8,2.3L569,88.6a8.61,8.61,0,0,0-4.9-1.5c-5.5,0-8.3,4.7-8.3,11.8s3.3,11.9,8.2,11.9a8.39,8.39,0,0,0,4.9-1.6l1.7,4.1c-1.5,1.2-4.2,2.3-8.2,2.3m20.6,0a19.46,19.46,0,0,1-9.5-2.3l1.8-4.3a13.21,13.21,0,0,0,6.9,1.9c3.4,0,6.2-2.2,6.2-4.9,0-7.5-13.8-4-13.8-14.2,0-4.7,4.2-9.2,11-9.2a16.85,16.85,0,0,1,8.9,2.3l-1.8,3.9A10.31,10.31,0,0,0,587,87c-3.5,0-5.6,2.1-5.6,4.5,0,7,14,3.9,14,14.4-.1,4.9-4.9,9.7-12.4,9.7" />
                      </g>
                    </svg>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="ons-header__main">
            <div class="ons-container">
              <div
                class="ons-grid ons-grid--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap">
                <div class="ons-grid__col ons-col-auto ons-u-flex-shrink">
                  <div class="ons-header__title">Interviewer led question example</div>
                </div>
              </div>
            </div>
          </div>
        </header>
        <div class="ons-page__container ons-container">
          <nav class="ons-breadcrumbs" aria-label="Breadcrumbs">
            <ol class="ons-breadcrumbs__items ons-u-fs-s">
              <li class="ons-breadcrumbs__item" id="breadcrumb-1">
                <a class="ons-breadcrumbs__link" href="#0">Previous</a>
                <svg class="ons-icon" viewBox="0 0 8 13" xmlns="http://www.w3.org/2000/svg" focusable="false"
                  fill="currentColor">
                  <path
                    d="M5.74,14.28l-.57-.56a.5.5,0,0,1,0-.71h0l5-5-5-5a.5.5,0,0,1,0-.71h0l.57-.56a.5.5,0,0,1,.71,0h0l5.93,5.93a.5.5,0,0,1,0,.7L6.45,14.28a.5.5,0,0,1-.71,0Z"
                    transform="translate(-5.02 -1.59)" />
                </svg>
              </li>
            </ol>
          </nav>
          <div class="ons-grid">
            <div class="ons-grid__col ons-col-12@m ">
              <main id="main-content" class="ons-page__main ">
                <div class="ons-question ons-u-mb-l">
                  <h1 id="question-title" class="ons-question__title">How many visitors do you have staying overnight at
                    3 Severn Road on Sunday 21 March 2021?</h1>
                  <div class="ons-question__description ons-u-mb-m">
                    <p>A visitor is anyone aged <strong>16 years or over</strong> who usually lives at another address.
                      Enter “0” if there are no visitors staying overnight.</p>
                  </div>
                  <div class="ons-question__instruction ons-u-mb-m">
                    <p>Tell respondent to turn to <strong>Showcard 2</strong> or show them the following Electronic
                      Showcard</p>
                  </div>
                  <details id="" class="ons-details ons-js-details ons-u-mb-m">
                    <summary class="ons-details__heading ons-js-details-heading">
                      <h2 class="ons-details__title">Electronic Showcard</h2>
                      <span class="ons-details__icon">
                        <svg class="ons-icon" viewBox="0 0 8 13" xmlns="http://www.w3.org/2000/svg" focusable="false"
                          fill="currentColor">
                          <path
                            d="M5.74,14.28l-.57-.56a.5.5,0,0,1,0-.71h0l5-5-5-5a.5.5,0,0,1,0-.71h0l.57-.56a.5.5,0,0,1,.71,0h0l5.93,5.93a.5.5,0,0,1,0,.7L6.45,14.28a.5.5,0,0,1-.71,0Z"
                            transform="translate(-5.02 -1.59)" />
                        </svg>
                      </span>
                    </summary>
                    <div id="-content" class="ons-details__content ons-js-details-content">
                      <p>Visitor information is collected to ensure that everyone is counted, in order to produce
                        accurate estimates of the population, to facilitate effective planning and funding decisions</p>
                    </div>
                  </details>
                  <div class="ons-question__answer ons-u-mb-m">
                    <div class="ons-field">
                      <label class="ons-label" for="number-of-visitors">Number of visitors</label>
                      <input type="text" id="number-of-visitors"
                        class="ons-input ons-input--text ons-input-type__input ons-input-number--w-2"
                        name="number-of-visitors" pattern="[0-9]*" inputmode="numeric" />
                    </div>
                  </div>
                </div>
                <button type="submit" class="ons-btn">
                  <span class="ons-btn__inner"><span class="ons-btn__text">Save and continue</span>
                  </span>
                </button>
              </main>
            </div>
          </div>
        </div>
      </div>
    </div>
    <script>
      (function() {
        var s = ['https://cdn.ons.gov.uk/sdc/design-system/65.2.3/scripts/main.js'],
          c = document.createElement('script');
        if (!('noModule' in c)) {
          for (var i = 0; i < s.length; i++) {
            s[i] = s[i].replace('.js', '.es5.js');
          }
        }
        for (var i = 0; i < s.length; i++) {
          var e = document.createElement('script');
          e.src = s[i];
          document.body.appendChild(e);
        }
      })();
    </script>
    <div class="embeddable"></div>
    <style>
      body {
        height: auto;
      }
    </style>
    <script src="/js/main.js?t=1694002367554"></script>
  </body>

</html>

Help improve this page

Let us know how we could improve this page, or share your user research findings. Discuss the ‘Question’ pattern on GitHub (opens in a new tab)