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

Ask users for Relationships

Overview

Use this pattern to help users define the relationship between two people.

Example: Third-person relationship question contents

Nunjucks

{% extends "layout/_template.njk" %}
{% from "components/question/_macro.njk" import onsQuestion %}
{% from "components/relationships/_macro.njk" import onsRelationships %}
{%
    set pageConfig = {
        "header": {
            "title": "Relationships example"
        },
        "breadcrumbs": {
            "ariaLabel": 'Breadcrumbs',
            "itemsList": [
                {
                    "url": '#0',
                    "text": 'Previous'
                }
            ]
        }
    }
%}

{% block main %}
    {%
        call onsQuestion({
            "title": "Thinking of Joe Bloggs, Amanda Bloggs is their <strong>…</strong>",
            "description": "<p>Complete the sentence by selecting the appropriate relationship</p>",
            "readDescriptionFirst": true,
            "legendIsQuestionTitle": true,
            "legendTitleClasses": "ons-js-relationships-legend",
            "submitButton": true
        })
    %}
        {{
            onsRelationships({
                "playback": "Amanda Bloggs is Joe Bloggs' <strong>…</strong>",
                "name": "relationship",
                "dontWrap": true,
                "radios": [
                    {
                        "id": "husband-wife-example-relationships",
                        "value": "husband-wife",
                        "label": {
                            "text": "Husband or wife"
                        },
                        "attributes": {
                            "data-title": "Thinking of Joe Bloggs, Amanda Bloggs is their <strong>husband or wife</strong>",
                            "data-playback": "Amanda Bloggs is Joe Bloggs' <strong>husband or wife</strong>"
                        }
                    },
                    {
                        "id": "civil-partner-example-relationships",
                        "value": "civil-partner",
                        "label": {
                            "text": "Legally registered civil partner"
                        },
                        "attributes": {
                            "data-title": "Thinking of Joe Bloggs, Amanda Bloggs is their <strong>legally registered civil partner</strong>",
                            "data-playback": "Amanda Bloggs is Joe Bloggs' <strong>legally registered civil partner</strong>"
                        }
                    },
                    {
                        "id": "partner-example-relationships",
                        "value": "partner",
                        "label": {
                            "text": "Partner"
                        },
                        "attributes": {
                            "data-title": "Thinking of Joe Bloggs, Amanda Bloggs is their <strong>partner</strong>",
                            "data-playback": "Amanda Bloggs is Joe Bloggs' <strong>partner</strong>"
                        }
                    },
                    {
                        "id": "son-daughter-example-relationships",
                        "value": "son-daughter",
                        "label": {
                            "text": "Son or daughter"
                        },
                        "attributes": {
                            "data-title": "Thinking of Joe Bloggs, Amanda Bloggs is their <strong>son or daughter</strong>",
                            "data-playback": "Amanda Bloggs is Joe Bloggs' <strong>son or daughter</strong>"
                        }
                    },
                    {
                        "id": "stepchild-example-relationships",
                        "value": "stepchild",
                        "label": {
                            "text": "Stepchild"
                        },
                        "attributes": {
                            "data-title": "Thinking of Joe Bloggs, Amanda Bloggs is their <strong>stepchild</strong>",
                            "data-playback": "Amanda Bloggs is Joe Bloggs' <strong>stepchild</strong>"
                        }
                    },
                    {
                        "id": "brother-sister-example-relationships",
                        "value": "brother-sister",
                        "label": {
                            "text": "Brother or sister"
                        },
                        "attributes": {
                            "data-title": "Thinking of Joe Bloggs, Amanda Bloggs is their <strong>brother or sister</strong>",
                            "data-playback": "Amanda Bloggs is Joe Bloggs' <strong>brother or sister</strong>"
                        }
                    },
                    {
                        "id": "stepbrother-stepsister-example-relationships",
                        "value": "stepbrother-stepsister",
                        "label": {
                            "text": "Stepbrother or stepsister"
                        },
                        "attributes": {
                            "data-title": "Thinking of Joe Bloggs, Amanda Bloggs is their <strong>stepbrother or sister</strong>",
                            "data-playback": "Amanda Bloggs is Joe Bloggs' <strong>stepbrother or sister</strong>"
                        }
                    },
                    {
                        "id": "mother-father-example-relationships",
                        "value": "mother-father",
                        "label": {
                            "text": "Mother or father"
                        },
                        "attributes": {
                            "data-title": "Thinking of Joe Bloggs, Amanda Bloggs is their <strong>mother or father</strong>",
                            "data-playback": "Amanda Bloggs is Joe Bloggs' <strong>mother or father</strong>"
                        }
                    },
                    {
                        "id": "stepmother-stepfather-example-relationships",
                        "value": "stepmother-stepfather",
                        "label": {
                            "text": "Stepmother or stepfather"
                        },
                        "attributes": {
                            "data-title": "Thinking of Joe Bloggs, Amanda Bloggs is their <strong>stepmother or stepfather</strong>",
                            "data-playback": "Amanda Bloggs is Joe Bloggs' <strong>stepmother or stepfather</strong>"
                        }
                    },
                    {
                        "id": "grandchild-example-relationships",
                        "value": "grandchild",
                        "label": {
                            "text": "Grandchild"
                        },
                        "attributes": {
                            "data-title": "Thinking of Joe Bloggs, Amanda Bloggs is their <strong>grandchild</strong>",
                            "data-playback": "Amanda Bloggs is Joe Bloggs' <strong>grandchild</strong>"
                        }
                    },
                    {
                        "id": "grandparent-example-relationships",
                        "value": "grandparent",
                        "label": {
                            "text": "Grandparent"
                        },
                        "attributes": {
                            "data-title": "Thinking of Joe Bloggs, Amanda Bloggs is their <strong>grandparents</strong>",
                            "data-playback": "Amanda Bloggs is Joe Bloggs' <strong>grandparents</strong>"
                        }
                    },
                    {
                        "id": "other-relation-example-relationships",
                        "value": "other-relation",
                        "label": {
                            "text": "Other relation"
                        },
                        "attributes": {
                            "data-title": "Thinking of Joe Bloggs, Amanda Bloggs is their <strong>other relation</strong>",
                            "data-playback": "Amanda Bloggs is Joe Bloggs' <strong>other relation</strong>"
                        }
                    },
                    {
                        "id": "unrelated-example-relationships",
                        "value": "unrelated",
                        "label": {
                            "text": "Unrelated",
                            "description": "Including foster child"
                        },
                        "attributes": {
                            "data-title": "Thinking of Joe Bloggs, Amanda Bloggs is <strong>unrelated</strong> to Joe Bloggs",
                            "data-playback": "Amanda Bloggs is <strong>unrelated</strong> to Joe Bloggs"
                        }
                    }
                ]
            })
        }}
    {% 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
idstringfalseThe HTML id of the component
classesstringfalseSets custom classes to add to the component
playbackstringtrueSets the placeholder text for the playback of the answer that follows the radios, for example, "Joe Bloggs is your ...". This can contain HTML.
radiosArray<Radio> reftrueSets an array of radio options. Each option must contain data-title and data-playback attributes.
namestringfalseThe HTML name attribute for the component
dontWrapbooleanfalsePrevents the radio inputs from being wrapped in the fieldset component
legendIsQuestionTitlebooleanfalseCreates an h1 inside the legend. Use when the radio is the only fieldset on the page and the question component is not being used.

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: Third-person relationship question</title>
    <link rel="stylesheet" href="https://cdn.ons.gov.uk/sdc/design-system/72.0.1/css/main.css" />
    <link rel="stylesheet" media="print" href="https://cdn.ons.gov.uk/sdc/design-system/72.0.1/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/72.0.1/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="Relationships example" />
    <meta property="og:locale" content="en" />
    <!-- Favicons -->
    <link rel="icon" type="image/x-icon" href="https://cdn.ons.gov.uk/sdc/design-system/72.0.1/favicons/favicon.ico" />
    <link rel="icon" type="image/png" href="https://cdn.ons.gov.uk/sdc/design-system/72.0.1/favicons/favicon-32x32.png"
      sizes="32x32" />
    <link rel="icon" type="image/png" href="https://cdn.ons.gov.uk/sdc/design-system/72.0.1/favicons/favicon-16x16.png"
      sizes="16x16" />
    <link rel="mask-icon" href="https://cdn.ons.gov.uk/sdc/design-system/72.0.1/favicons/safari-pinned-tab.svg"
      color="#000000" />
    <link rel="apple-touch-icon" type="image/png"
      href="https://cdn.ons.gov.uk/sdc/design-system/72.0.1/favicons/apple-touch-icon.png" sizes="180x180" />
    <link rel="manifest" href="https://cdn.ons.gov.uk/sdc/design-system/72.0.1/favicons/manifest.json" />
  </head>

  <body>
    <!-- prettier-ignore-start -->
    <script>
      document.body.className = ((document.body.className) ? document.body.className + ' ons-js-enabled' :
        'ons-js-enabled');
    </script>
    <!-- prettier-ignore-end -->
    <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-flex ons-grid-flex--between ons-grid-flex--vertical-center ons-grid-flex--no-wrap ons-grid--gutterless">
                <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="208" height="20"
                      viewBox="33 2 552 60" aria-labelledby="ons-logo-en-alt" role="img">
                      <title id="ons-logo-en-alt"> Office for National Statistics homepage </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" role="img">
                      <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-flex ons-grid-flex--between ons-grid-flex--vertical-center ons-grid-flex--no-wrap ons-grid--gutterless">
                <div class="ons-grid__col ons-col-auto ons-u-flex-shrink">
                  <div class="ons-header__title">Relationships 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" role="img"
                  title="ons-icon-chevron">
                  <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-xl">
                  <div class="ons-question__answer ons-u-mb-l">
                    <fieldset class="ons-fieldset">
                      <legend aria-describedBy="legend-description"
                        class="ons-fieldset__legend ons-u-mb-no ons-fieldset__legend--with-description">
                        <h1 id="fieldset-legend-title" class="ons-fieldset__legend-title ons-js-relationships-legend">
                          <div class="ons-question__description ons-u-vh">
                            <p>Complete the sentence by selecting the appropriate relationship</p>
                          </div> Thinking of Joe Bloggs, Amanda Bloggs is their <strong>…</strong>
                        </h1>
                      </legend>
                      <div id="legend-description"
                        class="ons-fieldset__description ons-fieldset__description--title ons-u-mb-l">
                        <div aria-hidden="true">
                          <p>Complete the sentence by selecting the appropriate relationship</p>
                        </div>
                      </div>
                      <div class="ons-relationships ons-js-relationships">
                        <div class="ons-input-items">
                          <div class="ons-radios__items">
                            <span class="ons-radios__item">
                              <span class="ons-radio">
                                <input type="radio" id="husband-wife-example-relationships"
                                  class="ons-radio__input ons-js-radio" value="husband-wife" name="relationship"
                                  data-title="Thinking of Joe Bloggs, Amanda Bloggs is their &lt;strong&gt;husband or wife&lt;/strong&gt;"
                                  data-playback="Amanda Bloggs is Joe Bloggs&#39; &lt;strong&gt;husband or wife&lt;/strong&gt;" />
                                <label class=" ons-radio__label" for="husband-wife-example-relationships"
                                  id="husband-wife-example-relationships-label">Husband or wife</label>
                              </span>
                            </span>
                            <br />
                            <span class="ons-radios__item">
                              <span class="ons-radio">
                                <input type="radio" id="civil-partner-example-relationships"
                                  class="ons-radio__input ons-js-radio" value="civil-partner" name="relationship"
                                  data-title="Thinking of Joe Bloggs, Amanda Bloggs is their &lt;strong&gt;legally registered civil partner&lt;/strong&gt;"
                                  data-playback="Amanda Bloggs is Joe Bloggs&#39; &lt;strong&gt;legally registered civil partner&lt;/strong&gt;" />
                                <label class=" ons-radio__label" for="civil-partner-example-relationships"
                                  id="civil-partner-example-relationships-label">Legally registered civil
                                  partner</label>
                              </span>
                            </span>
                            <br />
                            <span class="ons-radios__item">
                              <span class="ons-radio">
                                <input type="radio" id="partner-example-relationships"
                                  class="ons-radio__input ons-js-radio" value="partner" name="relationship"
                                  data-title="Thinking of Joe Bloggs, Amanda Bloggs is their &lt;strong&gt;partner&lt;/strong&gt;"
                                  data-playback="Amanda Bloggs is Joe Bloggs&#39; &lt;strong&gt;partner&lt;/strong&gt;" />
                                <label class=" ons-radio__label" for="partner-example-relationships"
                                  id="partner-example-relationships-label">Partner</label>
                              </span>
                            </span>
                            <br />
                            <span class="ons-radios__item">
                              <span class="ons-radio">
                                <input type="radio" id="son-daughter-example-relationships"
                                  class="ons-radio__input ons-js-radio" value="son-daughter" name="relationship"
                                  data-title="Thinking of Joe Bloggs, Amanda Bloggs is their &lt;strong&gt;son or daughter&lt;/strong&gt;"
                                  data-playback="Amanda Bloggs is Joe Bloggs&#39; &lt;strong&gt;son or daughter&lt;/strong&gt;" />
                                <label class=" ons-radio__label" for="son-daughter-example-relationships"
                                  id="son-daughter-example-relationships-label">Son or daughter</label>
                              </span>
                            </span>
                            <br />
                            <span class="ons-radios__item">
                              <span class="ons-radio">
                                <input type="radio" id="stepchild-example-relationships"
                                  class="ons-radio__input ons-js-radio" value="stepchild" name="relationship"
                                  data-title="Thinking of Joe Bloggs, Amanda Bloggs is their &lt;strong&gt;stepchild&lt;/strong&gt;"
                                  data-playback="Amanda Bloggs is Joe Bloggs&#39; &lt;strong&gt;stepchild&lt;/strong&gt;" />
                                <label class=" ons-radio__label" for="stepchild-example-relationships"
                                  id="stepchild-example-relationships-label">Stepchild</label>
                              </span>
                            </span>
                            <br />
                            <span class="ons-radios__item">
                              <span class="ons-radio">
                                <input type="radio" id="brother-sister-example-relationships"
                                  class="ons-radio__input ons-js-radio" value="brother-sister" name="relationship"
                                  data-title="Thinking of Joe Bloggs, Amanda Bloggs is their &lt;strong&gt;brother or sister&lt;/strong&gt;"
                                  data-playback="Amanda Bloggs is Joe Bloggs&#39; &lt;strong&gt;brother or sister&lt;/strong&gt;" />
                                <label class=" ons-radio__label" for="brother-sister-example-relationships"
                                  id="brother-sister-example-relationships-label">Brother or sister</label>
                              </span>
                            </span>
                            <br />
                            <span class="ons-radios__item">
                              <span class="ons-radio">
                                <input type="radio" id="stepbrother-stepsister-example-relationships"
                                  class="ons-radio__input ons-js-radio" value="stepbrother-stepsister"
                                  name="relationship"
                                  data-title="Thinking of Joe Bloggs, Amanda Bloggs is their &lt;strong&gt;stepbrother or sister&lt;/strong&gt;"
                                  data-playback="Amanda Bloggs is Joe Bloggs&#39; &lt;strong&gt;stepbrother or sister&lt;/strong&gt;" />
                                <label class=" ons-radio__label" for="stepbrother-stepsister-example-relationships"
                                  id="stepbrother-stepsister-example-relationships-label">Stepbrother or
                                  stepsister</label>
                              </span>
                            </span>
                            <br />
                            <span class="ons-radios__item">
                              <span class="ons-radio">
                                <input type="radio" id="mother-father-example-relationships"
                                  class="ons-radio__input ons-js-radio" value="mother-father" name="relationship"
                                  data-title="Thinking of Joe Bloggs, Amanda Bloggs is their &lt;strong&gt;mother or father&lt;/strong&gt;"
                                  data-playback="Amanda Bloggs is Joe Bloggs&#39; &lt;strong&gt;mother or father&lt;/strong&gt;" />
                                <label class=" ons-radio__label" for="mother-father-example-relationships"
                                  id="mother-father-example-relationships-label">Mother or father</label>
                              </span>
                            </span>
                            <br />
                            <span class="ons-radios__item">
                              <span class="ons-radio">
                                <input type="radio" id="stepmother-stepfather-example-relationships"
                                  class="ons-radio__input ons-js-radio" value="stepmother-stepfather"
                                  name="relationship"
                                  data-title="Thinking of Joe Bloggs, Amanda Bloggs is their &lt;strong&gt;stepmother or stepfather&lt;/strong&gt;"
                                  data-playback="Amanda Bloggs is Joe Bloggs&#39; &lt;strong&gt;stepmother or stepfather&lt;/strong&gt;" />
                                <label class=" ons-radio__label" for="stepmother-stepfather-example-relationships"
                                  id="stepmother-stepfather-example-relationships-label">Stepmother or
                                  stepfather</label>
                              </span>
                            </span>
                            <br />
                            <span class="ons-radios__item">
                              <span class="ons-radio">
                                <input type="radio" id="grandchild-example-relationships"
                                  class="ons-radio__input ons-js-radio" value="grandchild" name="relationship"
                                  data-title="Thinking of Joe Bloggs, Amanda Bloggs is their &lt;strong&gt;grandchild&lt;/strong&gt;"
                                  data-playback="Amanda Bloggs is Joe Bloggs&#39; &lt;strong&gt;grandchild&lt;/strong&gt;" />
                                <label class=" ons-radio__label" for="grandchild-example-relationships"
                                  id="grandchild-example-relationships-label">Grandchild</label>
                              </span>
                            </span>
                            <br />
                            <span class="ons-radios__item">
                              <span class="ons-radio">
                                <input type="radio" id="grandparent-example-relationships"
                                  class="ons-radio__input ons-js-radio" value="grandparent" name="relationship"
                                  data-title="Thinking of Joe Bloggs, Amanda Bloggs is their &lt;strong&gt;grandparents&lt;/strong&gt;"
                                  data-playback="Amanda Bloggs is Joe Bloggs&#39; &lt;strong&gt;grandparents&lt;/strong&gt;" />
                                <label class=" ons-radio__label" for="grandparent-example-relationships"
                                  id="grandparent-example-relationships-label">Grandparent</label>
                              </span>
                            </span>
                            <br />
                            <span class="ons-radios__item">
                              <span class="ons-radio">
                                <input type="radio" id="other-relation-example-relationships"
                                  class="ons-radio__input ons-js-radio" value="other-relation" name="relationship"
                                  data-title="Thinking of Joe Bloggs, Amanda Bloggs is their &lt;strong&gt;other relation&lt;/strong&gt;"
                                  data-playback="Amanda Bloggs is Joe Bloggs&#39; &lt;strong&gt;other relation&lt;/strong&gt;" />
                                <label class=" ons-radio__label" for="other-relation-example-relationships"
                                  id="other-relation-example-relationships-label">Other relation</label>
                              </span>
                            </span>
                            <br />
                            <span class="ons-radios__item">
                              <span class="ons-radio">
                                <input type="radio" id="unrelated-example-relationships"
                                  class="ons-radio__input ons-js-radio" value="unrelated" name="relationship"
                                  data-title="Thinking of Joe Bloggs, Amanda Bloggs is &lt;strong&gt;unrelated&lt;/strong&gt; to Joe Bloggs"
                                  data-playback="Amanda Bloggs is &lt;strong&gt;unrelated&lt;/strong&gt; to Joe Bloggs" />
                                <label class=" ons-radio__label ons-label--with-description"
                                  for="unrelated-example-relationships"
                                  aria-describedby="unrelated-example-relationships-label-description-hint"
                                  id="unrelated-example-relationships-label">Unrelated <span
                                    class="ons-label__aria-hidden-description" aria-hidden="true">
                                    <span class="ons-label__description ons-radio__label--with-description">Including
                                      foster child</span></span></label>
                                <span class="ons-label__visually-hidden-description ons-u-vh"
                                  id="unrelated-example-relationships-label-description-hint">Including foster
                                  child</span>
                              </span>
                            </span>
                          </div>
                        </div>
                        <p class="ons-relationships__playback ons-js-relationships-playback ons-u-d-no"
                          aria-live="polite">Amanda Bloggs is Joe Bloggs' <strong>…</strong></p>
                      </div>
                    </fieldset>
                  </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>
    <!-- prettier-ignore-start -->
    <script>
      (function() {
        var s = ['https://cdn.ons.gov.uk/sdc/design-system/72.0.1/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>
    <!-- prettier-ignore-end -->
    <div class="embeddable"></div>
    <style>
      body {
        height: auto;
      }
    </style>
    <script src="/js/main.js?t=1732268687213"></script>
  </body>

</html>

How to use this pattern

To make sure that the description is read before the incomplete sentence in the heading, call onsRelationships within onsQuestion, setting readDescriptionFirst: true.

This helps to add context to the heading for users of screen readers.

The pattern is enhanced with JavaScript to complete the sentence in the heading and the playback when the user selects a radio option.

First person

Example: First-person relationship question contents

Nunjucks
{% extends "layout/_template.njk" %}
{% from "components/question/_macro.njk" import onsQuestion %}
{% from "components/relationships/_macro.njk" import onsRelationships %}
{%
    set pageConfig = {
        "header": {
            "title": "Relationships example"
        },
        "breadcrumbs": {
            "ariaLabel": 'Breadcrumbs',
            "itemsList": [
                {
                    "url": '#0',
                    "text": 'Previous'
                }
            ]
        }
    }
%}

{% block main %}
    {%
        call onsQuestion({
            "title": "Joe Bloggs is your <strong>…</strong>",
            "description": "<p>Complete the sentence by selecting the appropriate relationship</p>",
            "readDescriptionFirst": true,
            "legendIsQuestionTitle": true,
            "legendTitleClasses": "ons-js-relationships-legend",
            "submitButton": true
        })
    %}
        {{
            onsRelationships({
                "legend": "Joe Bloggs is your <strong>…</strong>",
                "legendClasses": "ons-u-vh",
                "playback": "Joe Bloggs is your <strong>…</strong>",
                "name": "relationship",
                "dontWrap": true,
                "radios": [
                    {
                        "id": "husband-wife-example-relationships-you",
                        "value": "husband-wife",
                        "label": {
                            "text": "Husband or wife"
                        },
                        "attributes": {
                            "data-title": "Joe Bloggs is your <strong>husband or wife</strong>",
                            "data-playback": "Joe Bloggs is your <strong>husband or wife</strong>"
                        }
                    },
                    {
                        "id": "civil-partner-example-relationships-you",
                        "value": "civil-partner",
                        "label": {
                            "text": "Legally registered civil partner"
                        },
                        "attributes": {
                            "data-title": "Joe Bloggs is your <strong>legally registered civil partner</strong>",
                            "data-playback": "Joe Bloggs is your <strong>legally registered civil partner</strong>"
                        }
                    },
                    {
                        "id": "partner-example-relationships-you",
                        "value": "partner",
                        "label": {
                            "text": "Partner"
                        },
                        "attributes": {
                            "data-title": "Joe Bloggs is your <strong>partner</strong>",
                            "data-playback": "Joe Bloggs is your <strong>partner</strong>"
                        }
                    },
                    {
                        "id": "son-daughter-example-relationships-you",
                        "value": "son-daughter",
                        "label": {
                            "text": "Son or daughter"
                        },
                        "attributes": {
                            "data-title": "Joe Bloggs is your <strong>son or daughter</strong>",
                            "data-playback": "Joe Bloggs is your <strong>son or daughter</strong>"
                        }
                    },
                    {
                        "id": "stepchild-example-relationships-you",
                        "value": "stepchild",
                        "label": {
                            "text": "Stepchild"
                        },
                        "attributes": {
                            "data-title": "Joe Bloggs is your <strong>stepchild</strong>",
                            "data-playback": "Joe Bloggs is your <strong>stepchild</strong>"
                        }
                    },
                    {
                        "id": "brother-sister-example-relationships-you",
                        "value": "brother-sister",
                        "label": {
                            "text": "Brother or sister"
                        },
                        "attributes": {
                            "data-title": "Joe Bloggs is your <strong>brother or sister</strong>",
                            "data-playback": "Joe Bloggs is your <strong>brother or sister</strong>"
                        }
                    },
                    {
                        "id": "stepbrother-stepsister-example-relationships-you",
                        "value": "stepbrother-stepsister",
                        "label": {
                            "text": "Stepbrother or stepsister"
                        },
                        "attributes": {
                            "data-title": "Joe Bloggs is your <strong>stepbrother or sister</strong>",
                            "data-playback": "Joe Bloggs is your <strong>stepbrother or sister</strong>"
                        }
                    },
                    {
                        "id": "mother-father-example-relationships-you",
                        "value": "mother-father",
                        "label": {
                            "text": "Mother or father"
                        },
                        "attributes": {
                            "data-title": "Joe Bloggs is your <strong>mother or father</strong>",
                            "data-playback": "Joe Bloggs is your <strong>mother or father</strong>"
                        }
                    },
                    {
                        "id": "stepmother-stepfather-example-relationships-you",
                        "value": "stepmother-stepfather",
                        "label": {
                            "text": "Stepmother or stepfather"
                        },
                        "attributes": {
                            "data-title": "Joe Bloggs is your <strong>stepmother or stepfather</strong>",
                            "data-playback": "Joe Bloggs is your <strong>stepmother or stepfather</strong>"
                        }
                    },
                    {
                        "id": "grandchild-example-relationships-you",
                        "value": "grandchild",
                        "label": {
                            "text": "Grandchild"
                        },
                        "attributes": {
                            "data-title": "Joe Bloggs is your <strong>grandchild</strong>",
                            "data-playback": "Joe Bloggs is your <strong>grandchild</strong>"
                        }
                    },
                    {
                        "id": "grandparent-example-relationships-you",
                        "value": "grandparent",
                        "label": {
                            "text": "Grandparent"
                        },
                        "attributes": {
                            "data-title": "Joe Bloggs is your <strong>grandparent</strong>",
                            "data-playback": "Joe Bloggs is your <strong>grandparent</strong>"
                        }
                    },
                    {
                        "id": "other-relation-example-relationships-you",
                        "value": "other-relation",
                        "label": {
                            "text": "Other relation"
                        },
                        "attributes": {
                            "data-title": "Joe Bloggs is your <strong>other relation</strong>",
                            "data-playback": "Joe Bloggs is your <strong>other relation</strong>"
                        }
                    },
                    {
                        "id": "unrelated-example-relationships-you",
                        "value": "unrelated",
                        "label": {
                            "text": "Unrelated",
                            "description": "Including foster child"
                        },
                        "attributes": {
                            "data-title": "Joe Bloggs is <strong>unrelated</strong> to you",
                            "data-playback": "Joe Bloggs is <strong>unrelated</strong> to you"
                        }
                    }
                ]
            })
        }}
    {% 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
idstringfalseThe HTML id of the component
classesstringfalseSets custom classes to add to the component
playbackstringtrueSets the placeholder text for the playback of the answer that follows the radios, for example, "Joe Bloggs is your ...". This can contain HTML.
radiosArray<Radio> reftrueSets an array of radio options. Each option must contain data-title and data-playback attributes.
namestringfalseThe HTML name attribute for the component
dontWrapbooleanfalsePrevents the radio inputs from being wrapped in the fieldset component
legendIsQuestionTitlebooleanfalseCreates an h1 inside the legend. Use when the radio is the only fieldset on the page and the question component is not being used.
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: First-person relationship question</title>
    <link rel="stylesheet" href="https://cdn.ons.gov.uk/sdc/design-system/72.0.1/css/main.css" />
    <link rel="stylesheet" media="print" href="https://cdn.ons.gov.uk/sdc/design-system/72.0.1/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/72.0.1/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="Relationships example" />
    <meta property="og:locale" content="en" />
    <!-- Favicons -->
    <link rel="icon" type="image/x-icon" href="https://cdn.ons.gov.uk/sdc/design-system/72.0.1/favicons/favicon.ico" />
    <link rel="icon" type="image/png" href="https://cdn.ons.gov.uk/sdc/design-system/72.0.1/favicons/favicon-32x32.png"
      sizes="32x32" />
    <link rel="icon" type="image/png" href="https://cdn.ons.gov.uk/sdc/design-system/72.0.1/favicons/favicon-16x16.png"
      sizes="16x16" />
    <link rel="mask-icon" href="https://cdn.ons.gov.uk/sdc/design-system/72.0.1/favicons/safari-pinned-tab.svg"
      color="#000000" />
    <link rel="apple-touch-icon" type="image/png"
      href="https://cdn.ons.gov.uk/sdc/design-system/72.0.1/favicons/apple-touch-icon.png" sizes="180x180" />
    <link rel="manifest" href="https://cdn.ons.gov.uk/sdc/design-system/72.0.1/favicons/manifest.json" />
  </head>

  <body>
    <!-- prettier-ignore-start -->
    <script>
      document.body.className = ((document.body.className) ? document.body.className + ' ons-js-enabled' :
        'ons-js-enabled');
    </script>
    <!-- prettier-ignore-end -->
    <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-flex ons-grid-flex--between ons-grid-flex--vertical-center ons-grid-flex--no-wrap ons-grid--gutterless">
                <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="208" height="20"
                      viewBox="33 2 552 60" aria-labelledby="ons-logo-en-alt" role="img">
                      <title id="ons-logo-en-alt"> Office for National Statistics homepage </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" role="img">
                      <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-flex ons-grid-flex--between ons-grid-flex--vertical-center ons-grid-flex--no-wrap ons-grid--gutterless">
                <div class="ons-grid__col ons-col-auto ons-u-flex-shrink">
                  <div class="ons-header__title">Relationships 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" role="img"
                  title="ons-icon-chevron">
                  <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-xl">
                  <div class="ons-question__answer ons-u-mb-l">
                    <fieldset class="ons-fieldset">
                      <legend aria-describedBy="legend-description"
                        class="ons-fieldset__legend ons-u-mb-no ons-fieldset__legend--with-description">
                        <h1 id="fieldset-legend-title" class="ons-fieldset__legend-title ons-js-relationships-legend">
                          <div class="ons-question__description ons-u-vh">
                            <p>Complete the sentence by selecting the appropriate relationship</p>
                          </div> Joe Bloggs is your <strong>…</strong>
                        </h1>
                      </legend>
                      <div id="legend-description"
                        class="ons-fieldset__description ons-fieldset__description--title ons-u-mb-l">
                        <div aria-hidden="true">
                          <p>Complete the sentence by selecting the appropriate relationship</p>
                        </div>
                      </div>
                      <div class="ons-relationships ons-js-relationships">
                        <div class="ons-input-items">
                          <div class="ons-radios__items">
                            <span class="ons-radios__item">
                              <span class="ons-radio">
                                <input type="radio" id="husband-wife-example-relationships-you"
                                  class="ons-radio__input ons-js-radio" value="husband-wife" name="relationship"
                                  data-title="Joe Bloggs is your &lt;strong&gt;husband or wife&lt;/strong&gt;"
                                  data-playback="Joe Bloggs is your &lt;strong&gt;husband or wife&lt;/strong&gt;" />
                                <label class=" ons-radio__label" for="husband-wife-example-relationships-you"
                                  id="husband-wife-example-relationships-you-label">Husband or wife</label>
                              </span>
                            </span>
                            <br />
                            <span class="ons-radios__item">
                              <span class="ons-radio">
                                <input type="radio" id="civil-partner-example-relationships-you"
                                  class="ons-radio__input ons-js-radio" value="civil-partner" name="relationship"
                                  data-title="Joe Bloggs is your &lt;strong&gt;legally registered civil partner&lt;/strong&gt;"
                                  data-playback="Joe Bloggs is your &lt;strong&gt;legally registered civil partner&lt;/strong&gt;" />
                                <label class=" ons-radio__label" for="civil-partner-example-relationships-you"
                                  id="civil-partner-example-relationships-you-label">Legally registered civil
                                  partner</label>
                              </span>
                            </span>
                            <br />
                            <span class="ons-radios__item">
                              <span class="ons-radio">
                                <input type="radio" id="partner-example-relationships-you"
                                  class="ons-radio__input ons-js-radio" value="partner" name="relationship"
                                  data-title="Joe Bloggs is your &lt;strong&gt;partner&lt;/strong&gt;"
                                  data-playback="Joe Bloggs is your &lt;strong&gt;partner&lt;/strong&gt;" />
                                <label class=" ons-radio__label" for="partner-example-relationships-you"
                                  id="partner-example-relationships-you-label">Partner</label>
                              </span>
                            </span>
                            <br />
                            <span class="ons-radios__item">
                              <span class="ons-radio">
                                <input type="radio" id="son-daughter-example-relationships-you"
                                  class="ons-radio__input ons-js-radio" value="son-daughter" name="relationship"
                                  data-title="Joe Bloggs is your &lt;strong&gt;son or daughter&lt;/strong&gt;"
                                  data-playback="Joe Bloggs is your &lt;strong&gt;son or daughter&lt;/strong&gt;" />
                                <label class=" ons-radio__label" for="son-daughter-example-relationships-you"
                                  id="son-daughter-example-relationships-you-label">Son or daughter</label>
                              </span>
                            </span>
                            <br />
                            <span class="ons-radios__item">
                              <span class="ons-radio">
                                <input type="radio" id="stepchild-example-relationships-you"
                                  class="ons-radio__input ons-js-radio" value="stepchild" name="relationship"
                                  data-title="Joe Bloggs is your &lt;strong&gt;stepchild&lt;/strong&gt;"
                                  data-playback="Joe Bloggs is your &lt;strong&gt;stepchild&lt;/strong&gt;" />
                                <label class=" ons-radio__label" for="stepchild-example-relationships-you"
                                  id="stepchild-example-relationships-you-label">Stepchild</label>
                              </span>
                            </span>
                            <br />
                            <span class="ons-radios__item">
                              <span class="ons-radio">
                                <input type="radio" id="brother-sister-example-relationships-you"
                                  class="ons-radio__input ons-js-radio" value="brother-sister" name="relationship"
                                  data-title="Joe Bloggs is your &lt;strong&gt;brother or sister&lt;/strong&gt;"
                                  data-playback="Joe Bloggs is your &lt;strong&gt;brother or sister&lt;/strong&gt;" />
                                <label class=" ons-radio__label" for="brother-sister-example-relationships-you"
                                  id="brother-sister-example-relationships-you-label">Brother or sister</label>
                              </span>
                            </span>
                            <br />
                            <span class="ons-radios__item">
                              <span class="ons-radio">
                                <input type="radio" id="stepbrother-stepsister-example-relationships-you"
                                  class="ons-radio__input ons-js-radio" value="stepbrother-stepsister"
                                  name="relationship"
                                  data-title="Joe Bloggs is your &lt;strong&gt;stepbrother or sister&lt;/strong&gt;"
                                  data-playback="Joe Bloggs is your &lt;strong&gt;stepbrother or sister&lt;/strong&gt;" />
                                <label class=" ons-radio__label" for="stepbrother-stepsister-example-relationships-you"
                                  id="stepbrother-stepsister-example-relationships-you-label">Stepbrother or
                                  stepsister</label>
                              </span>
                            </span>
                            <br />
                            <span class="ons-radios__item">
                              <span class="ons-radio">
                                <input type="radio" id="mother-father-example-relationships-you"
                                  class="ons-radio__input ons-js-radio" value="mother-father" name="relationship"
                                  data-title="Joe Bloggs is your &lt;strong&gt;mother or father&lt;/strong&gt;"
                                  data-playback="Joe Bloggs is your &lt;strong&gt;mother or father&lt;/strong&gt;" />
                                <label class=" ons-radio__label" for="mother-father-example-relationships-you"
                                  id="mother-father-example-relationships-you-label">Mother or father</label>
                              </span>
                            </span>
                            <br />
                            <span class="ons-radios__item">
                              <span class="ons-radio">
                                <input type="radio" id="stepmother-stepfather-example-relationships-you"
                                  class="ons-radio__input ons-js-radio" value="stepmother-stepfather"
                                  name="relationship"
                                  data-title="Joe Bloggs is your &lt;strong&gt;stepmother or stepfather&lt;/strong&gt;"
                                  data-playback="Joe Bloggs is your &lt;strong&gt;stepmother or stepfather&lt;/strong&gt;" />
                                <label class=" ons-radio__label" for="stepmother-stepfather-example-relationships-you"
                                  id="stepmother-stepfather-example-relationships-you-label">Stepmother or
                                  stepfather</label>
                              </span>
                            </span>
                            <br />
                            <span class="ons-radios__item">
                              <span class="ons-radio">
                                <input type="radio" id="grandchild-example-relationships-you"
                                  class="ons-radio__input ons-js-radio" value="grandchild" name="relationship"
                                  data-title="Joe Bloggs is your &lt;strong&gt;grandchild&lt;/strong&gt;"
                                  data-playback="Joe Bloggs is your &lt;strong&gt;grandchild&lt;/strong&gt;" />
                                <label class=" ons-radio__label" for="grandchild-example-relationships-you"
                                  id="grandchild-example-relationships-you-label">Grandchild</label>
                              </span>
                            </span>
                            <br />
                            <span class="ons-radios__item">
                              <span class="ons-radio">
                                <input type="radio" id="grandparent-example-relationships-you"
                                  class="ons-radio__input ons-js-radio" value="grandparent" name="relationship"
                                  data-title="Joe Bloggs is your &lt;strong&gt;grandparent&lt;/strong&gt;"
                                  data-playback="Joe Bloggs is your &lt;strong&gt;grandparent&lt;/strong&gt;" />
                                <label class=" ons-radio__label" for="grandparent-example-relationships-you"
                                  id="grandparent-example-relationships-you-label">Grandparent</label>
                              </span>
                            </span>
                            <br />
                            <span class="ons-radios__item">
                              <span class="ons-radio">
                                <input type="radio" id="other-relation-example-relationships-you"
                                  class="ons-radio__input ons-js-radio" value="other-relation" name="relationship"
                                  data-title="Joe Bloggs is your &lt;strong&gt;other relation&lt;/strong&gt;"
                                  data-playback="Joe Bloggs is your &lt;strong&gt;other relation&lt;/strong&gt;" />
                                <label class=" ons-radio__label" for="other-relation-example-relationships-you"
                                  id="other-relation-example-relationships-you-label">Other relation</label>
                              </span>
                            </span>
                            <br />
                            <span class="ons-radios__item">
                              <span class="ons-radio">
                                <input type="radio" id="unrelated-example-relationships-you"
                                  class="ons-radio__input ons-js-radio" value="unrelated" name="relationship"
                                  data-title="Joe Bloggs is &lt;strong&gt;unrelated&lt;/strong&gt; to you"
                                  data-playback="Joe Bloggs is &lt;strong&gt;unrelated&lt;/strong&gt; to you" />
                                <label class=" ons-radio__label ons-label--with-description"
                                  for="unrelated-example-relationships-you"
                                  aria-describedby="unrelated-example-relationships-you-label-description-hint"
                                  id="unrelated-example-relationships-you-label">Unrelated <span
                                    class="ons-label__aria-hidden-description" aria-hidden="true">
                                    <span class="ons-label__description ons-radio__label--with-description">Including
                                      foster child</span></span></label>
                                <span class="ons-label__visually-hidden-description ons-u-vh"
                                  id="unrelated-example-relationships-you-label-description-hint">Including foster
                                  child</span>
                              </span>
                            </span>
                          </div>
                        </div>
                        <p class="ons-relationships__playback ons-js-relationships-playback ons-u-d-no"
                          aria-live="polite">Joe Bloggs is your <strong>…</strong></p>
                      </div>
                    </fieldset>
                  </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>
    <!-- prettier-ignore-start -->
    <script>
      (function() {
        var s = ['https://cdn.ons.gov.uk/sdc/design-system/72.0.1/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>
    <!-- prettier-ignore-end -->
    <div class="embeddable"></div>
    <style>
      body {
        height: auto;
      }
    </style>
    <script src="/js/main.js?t=1732268687213"></script>
  </body>

</html>

Error messages

Show this message when a user does not select any of the available radio options.

Example: Third-person relationship question contents

Nunjucks
{% extends "layout/_template.njk" %}
{% from "components/question/_macro.njk" import onsQuestion %}
{% from "components/relationships/_macro.njk" import onsRelationships %}
{% from "components/panel/_macro.njk" import onsPanel %}
{% from "components/list/_macro.njk" import onsList %}
{%
    set pageConfig = {
        "header": {
            "title": "Relationships example"
        },
        "breadcrumbs": {
            "ariaLabel": 'Breadcrumbs',
            "itemsList": [
                {
                    "url": '#0',
                    "text": 'Previous'
                }
            ]
        }
    }
%}

{% block main %}

    {%
        call onsPanel({
            "title": "There is a problem with your answer",
            "variant": "error"
        })
    %}
        {{
            onsList({
                "element": "ol",
                "itemsList": [
                    {
                        "text": "Select a relationship",
                        "url": "#relationship-error",
                        "variants": "inPageLink"
                    }
                ]
            })
        }}
    {% endcall %}
    {%
        call onsQuestion({
            "title": "Thinking of Joe Bloggs, Amanda Bloggs is their <strong>…</strong>",
            "description": "<p>Complete the sentence by selecting the appropriate relationship</p>",
            "readDescriptionFirst": true,
            "legendIsQuestionTitle": true,
            "legendTitleClasses": "ons-js-relationships-legend",
            "submitButton": true
        })
    %}
        {{
            onsRelationships({
                "playback": "Amanda Bloggs is Joe Bloggs' <strong>…</strong>",
                "name": "relationship",
                "dontWrap": true,
                "error": {
                    "id": "relationship-error",
                    "text": "Select a relationship"
                },
                "radios": [
                    {
                        "id": "husband-wife-example-relationships-error",
                        "value": "husband-wife",
                        "label": {
                            "text": "Husband or wife"
                        },
                        "attributes": {
                            "data-title": "Thinking of Joe Bloggs, Amanda Bloggs is their <strong>husband or wife</strong>",
                            "data-playback": "Amanda Bloggs is Joe Bloggs' <strong>husband or wife</strong>"
                        }
                    },
                    {
                        "id": "civil-partner-example-relationships-error",
                        "value": "civil-partner",
                        "label": {
                            "text": "Legally registered civil partner"
                        },
                        "attributes": {
                            "data-title": "Thinking of Joe Bloggs, Amanda Bloggs is their <strong>legally registered civil partner</strong>",
                            "data-playback": "Amanda Bloggs is Joe Bloggs' <strong>legally registered civil partner</strong>"
                        }
                    },
                    {
                        "id": "partner-example-relationships-error",
                        "value": "partner",
                        "label": {
                            "text": "Partner"
                        },
                        "attributes": {
                            "data-title": "Thinking of Joe Bloggs, Amanda Bloggs is their <strong>partner</strong>",
                            "data-playback": "Amanda Bloggs is Joe Bloggs' <strong>partner</strong>"
                        }
                    },
                    {
                        "id": "son-daughter-example-relationships-error",
                        "value": "son-daughter",
                        "label": {
                            "text": "Son or daughter"
                        },
                        "attributes": {
                            "data-title": "Thinking of Joe Bloggs, Amanda Bloggs is their <strong>son or daughter</strong>",
                            "data-playback": "Amanda Bloggs is Joe Bloggs' <strong>son or daughter</strong>"
                        }
                    },
                    {
                        "id": "stepchild-example-relationships-error",
                        "value": "stepchild",
                        "label": {
                            "text": "Stepchild"
                        },
                        "attributes": {
                            "data-title": "Thinking of Joe Bloggs, Amanda Bloggs is their <strong>stepchild</strong>",
                            "data-playback": "Amanda Bloggs is Joe Bloggs' <strong>stepchild</strong>"
                        }
                    },
                    {
                        "id": "brother-sister-example-relationships-error",
                        "value": "brother-sister",
                        "label": {
                            "text": "Brother or sister"
                        },
                        "attributes": {
                            "data-title": "Thinking of Joe Bloggs, Amanda Bloggs is their <strong>brother or sister</strong>",
                            "data-playback": "Amanda Bloggs is Joe Bloggs' <strong>brother or sister</strong>"
                        }
                    },
                    {
                        "id": "stepbrother-stepsister-example-relationships-error",
                        "value": "stepbrother-stepsister",
                        "label": {
                            "text": "Stepbrother or stepsister"
                        },
                        "attributes": {
                            "data-title": "Thinking of Joe Bloggs, Amanda Bloggs is their <strong>stepbrother or sister</strong>",
                            "data-playback": "Amanda Bloggs is Joe Bloggs' <strong>stepbrother or sister</strong>"
                        }
                    },
                    {
                        "id": "mother-father-example-relationships-error",
                        "value": "mother-father",
                        "label": {
                            "text": "Mother or father"
                        },
                        "attributes": {
                            "data-title": "Thinking of Joe Bloggs, Amanda Bloggs is their <strong>mother or father</strong>",
                            "data-playback": "Amanda Bloggs is Joe Bloggs' <strong>mother or father</strong>"
                        }
                    },
                    {
                        "id": "stepmother-stepfather-example-relationships-error",
                        "value": "stepmother-stepfather",
                        "label": {
                            "text": "Stepmother or stepfather"
                        },
                        "attributes": {
                            "data-title": "Thinking of Joe Bloggs, Amanda Bloggs is their <strong>stepmother or stepfather</strong>",
                            "data-playback": "Amanda Bloggs is Joe Bloggs' <strong>stepmother or stepfather</strong>"
                        }
                    },
                    {
                        "id": "grandchild-example-relationships-error",
                        "value": "grandchild",
                        "label": {
                            "text": "Grandchild"
                        },
                        "attributes": {
                            "data-title": "Thinking of Joe Bloggs, Amanda Bloggs is their <strong>grandchild</strong>",
                            "data-playback": "Amanda Bloggs is Joe Bloggs' <strong>grandchild</strong>"
                        }
                    },
                    {
                        "id": "grandparent-example-relationships-error",
                        "value": "grandparent",
                        "label": {
                            "text": "Grandparent"
                        },
                        "attributes": {
                            "data-title": "Thinking of Joe Bloggs, Amanda Bloggs is their <strong>grandparents</strong>",
                            "data-playback": "Amanda Bloggs is Joe Bloggs' <strong>grandparents</strong>"
                        }
                    },
                    {
                        "id": "other-relation-example-relationships-error",
                        "value": "other-relation",
                        "label": {
                            "text": "Other relation"
                        },
                        "attributes": {
                            "data-title": "Thinking of Joe Bloggs, Amanda Bloggs is their <strong>other relation</strong>",
                            "data-playback": "Amanda Bloggs is Joe Bloggs' <strong>other relation</strong>"
                        }
                    },
                    {
                        "id": "unrelated-example-relationships-error",
                        "value": "unrelated",
                        "label": {
                            "text": "Unrelated",
                            "description": "Including foster child"
                        },
                        "attributes": {
                            "data-title": "Thinking of Joe Bloggs, Amanda Bloggs is <strong>unrelated</strong> to Joe Bloggs",
                            "data-playback": "Amanda Bloggs is <strong>unrelated</strong> to Joe Bloggs"
                        }
                    }
                ]
            })
        }}
    {% 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
idstringfalseThe HTML id of the component
classesstringfalseSets custom classes to add to the component
playbackstringtrueSets the placeholder text for the playback of the answer that follows the radios, for example, "Joe Bloggs is your ...". This can contain HTML.
radiosArray<Radio> reftrueSets an array of radio options. Each option must contain data-title and data-playback attributes.
namestringfalseThe HTML name attribute for the component
dontWrapbooleanfalsePrevents the radio inputs from being wrapped in the fieldset component
legendIsQuestionTitlebooleanfalseCreates an h1 inside the legend. Use when the radio is the only fieldset on the page and the question component is not being used.
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: Third-person relationship question</title>
    <link rel="stylesheet" href="https://cdn.ons.gov.uk/sdc/design-system/72.0.1/css/main.css" />
    <link rel="stylesheet" media="print" href="https://cdn.ons.gov.uk/sdc/design-system/72.0.1/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/72.0.1/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="Relationships example" />
    <meta property="og:locale" content="en" />
    <!-- Favicons -->
    <link rel="icon" type="image/x-icon" href="https://cdn.ons.gov.uk/sdc/design-system/72.0.1/favicons/favicon.ico" />
    <link rel="icon" type="image/png" href="https://cdn.ons.gov.uk/sdc/design-system/72.0.1/favicons/favicon-32x32.png"
      sizes="32x32" />
    <link rel="icon" type="image/png" href="https://cdn.ons.gov.uk/sdc/design-system/72.0.1/favicons/favicon-16x16.png"
      sizes="16x16" />
    <link rel="mask-icon" href="https://cdn.ons.gov.uk/sdc/design-system/72.0.1/favicons/safari-pinned-tab.svg"
      color="#000000" />
    <link rel="apple-touch-icon" type="image/png"
      href="https://cdn.ons.gov.uk/sdc/design-system/72.0.1/favicons/apple-touch-icon.png" sizes="180x180" />
    <link rel="manifest" href="https://cdn.ons.gov.uk/sdc/design-system/72.0.1/favicons/manifest.json" />
  </head>

  <body>
    <!-- prettier-ignore-start -->
    <script>
      document.body.className = ((document.body.className) ? document.body.className + ' ons-js-enabled' :
        'ons-js-enabled');
    </script>
    <!-- prettier-ignore-end -->
    <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-flex ons-grid-flex--between ons-grid-flex--vertical-center ons-grid-flex--no-wrap ons-grid--gutterless">
                <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="208" height="20"
                      viewBox="33 2 552 60" aria-labelledby="ons-logo-en-alt" role="img">
                      <title id="ons-logo-en-alt"> Office for National Statistics homepage </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" role="img">
                      <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-flex ons-grid-flex--between ons-grid-flex--vertical-center ons-grid-flex--no-wrap ons-grid--gutterless">
                <div class="ons-grid__col ons-col-auto ons-u-flex-shrink">
                  <div class="ons-header__title">Relationships 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" role="img"
                  title="ons-icon-chevron">
                  <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 aria-labelledby="alert" role="alert" tabindex="-1" class="ons-panel ons-panel--error">
                  <div class="ons-panel__header">
                    <h2 id="alert" data-qa="error-header" class="ons-panel__title ons-u-fs-r--b">There is a problem with
                      your answer</h2>
                  </div>
                  <div class="ons-panel__body">
                    <p class="ons-list ons-list--p">
                      <a href="#relationship-error" class="ons-list__link ons-js-inpagelink">Select a relationship</a>
                    </p>
                  </div>
                </div>
                <div class="ons-question ons-u-mb-xl">
                  <div class="ons-question__answer ons-u-mb-l">
                    <fieldset class="ons-fieldset">
                      <legend aria-describedBy="legend-description"
                        class="ons-fieldset__legend ons-u-mb-no ons-fieldset__legend--with-description">
                        <h1 id="fieldset-legend-title" class="ons-fieldset__legend-title ons-js-relationships-legend">
                          <div class="ons-question__description ons-u-vh">
                            <p>Complete the sentence by selecting the appropriate relationship</p>
                          </div> Thinking of Joe Bloggs, Amanda Bloggs is their <strong>…</strong>
                        </h1>
                      </legend>
                      <div id="legend-description"
                        class="ons-fieldset__description ons-fieldset__description--title ons-u-mb-l">
                        <div aria-hidden="true">
                          <p>Complete the sentence by selecting the appropriate relationship</p>
                        </div>
                      </div>
                      <div class="ons-relationships ons-js-relationships">
                        <div class="ons-panel ons-panel--error ons-panel--no-title" id="relationship-error">
                          <span class="ons-panel__assistive-text ons-u-vh">Error: </span>
                          <div class="ons-panel__body">
                            <p class="ons-panel__error">
                              <strong>Select a relationship</strong>
                            </p>
                            <div class="ons-input-items">
                              <div class="ons-radios__items">
                                <span class="ons-radios__item">
                                  <span class="ons-radio">
                                    <input type="radio" id="husband-wife-example-relationships-error"
                                      class="ons-radio__input ons-js-radio" value="husband-wife" name="relationship"
                                      data-title="Thinking of Joe Bloggs, Amanda Bloggs is their &lt;strong&gt;husband or wife&lt;/strong&gt;"
                                      data-playback="Amanda Bloggs is Joe Bloggs&#39; &lt;strong&gt;husband or wife&lt;/strong&gt;" />
                                    <label class=" ons-radio__label" for="husband-wife-example-relationships-error"
                                      id="husband-wife-example-relationships-error-label">Husband or wife</label>
                                  </span>
                                </span>
                                <br />
                                <span class="ons-radios__item">
                                  <span class="ons-radio">
                                    <input type="radio" id="civil-partner-example-relationships-error"
                                      class="ons-radio__input ons-js-radio" value="civil-partner" name="relationship"
                                      data-title="Thinking of Joe Bloggs, Amanda Bloggs is their &lt;strong&gt;legally registered civil partner&lt;/strong&gt;"
                                      data-playback="Amanda Bloggs is Joe Bloggs&#39; &lt;strong&gt;legally registered civil partner&lt;/strong&gt;" />
                                    <label class=" ons-radio__label" for="civil-partner-example-relationships-error"
                                      id="civil-partner-example-relationships-error-label">Legally registered civil
                                      partner</label>
                                  </span>
                                </span>
                                <br />
                                <span class="ons-radios__item">
                                  <span class="ons-radio">
                                    <input type="radio" id="partner-example-relationships-error"
                                      class="ons-radio__input ons-js-radio" value="partner" name="relationship"
                                      data-title="Thinking of Joe Bloggs, Amanda Bloggs is their &lt;strong&gt;partner&lt;/strong&gt;"
                                      data-playback="Amanda Bloggs is Joe Bloggs&#39; &lt;strong&gt;partner&lt;/strong&gt;" />
                                    <label class=" ons-radio__label" for="partner-example-relationships-error"
                                      id="partner-example-relationships-error-label">Partner</label>
                                  </span>
                                </span>
                                <br />
                                <span class="ons-radios__item">
                                  <span class="ons-radio">
                                    <input type="radio" id="son-daughter-example-relationships-error"
                                      class="ons-radio__input ons-js-radio" value="son-daughter" name="relationship"
                                      data-title="Thinking of Joe Bloggs, Amanda Bloggs is their &lt;strong&gt;son or daughter&lt;/strong&gt;"
                                      data-playback="Amanda Bloggs is Joe Bloggs&#39; &lt;strong&gt;son or daughter&lt;/strong&gt;" />
                                    <label class=" ons-radio__label" for="son-daughter-example-relationships-error"
                                      id="son-daughter-example-relationships-error-label">Son or daughter</label>
                                  </span>
                                </span>
                                <br />
                                <span class="ons-radios__item">
                                  <span class="ons-radio">
                                    <input type="radio" id="stepchild-example-relationships-error"
                                      class="ons-radio__input ons-js-radio" value="stepchild" name="relationship"
                                      data-title="Thinking of Joe Bloggs, Amanda Bloggs is their &lt;strong&gt;stepchild&lt;/strong&gt;"
                                      data-playback="Amanda Bloggs is Joe Bloggs&#39; &lt;strong&gt;stepchild&lt;/strong&gt;" />
                                    <label class=" ons-radio__label" for="stepchild-example-relationships-error"
                                      id="stepchild-example-relationships-error-label">Stepchild</label>
                                  </span>
                                </span>
                                <br />
                                <span class="ons-radios__item">
                                  <span class="ons-radio">
                                    <input type="radio" id="brother-sister-example-relationships-error"
                                      class="ons-radio__input ons-js-radio" value="brother-sister" name="relationship"
                                      data-title="Thinking of Joe Bloggs, Amanda Bloggs is their &lt;strong&gt;brother or sister&lt;/strong&gt;"
                                      data-playback="Amanda Bloggs is Joe Bloggs&#39; &lt;strong&gt;brother or sister&lt;/strong&gt;" />
                                    <label class=" ons-radio__label" for="brother-sister-example-relationships-error"
                                      id="brother-sister-example-relationships-error-label">Brother or sister</label>
                                  </span>
                                </span>
                                <br />
                                <span class="ons-radios__item">
                                  <span class="ons-radio">
                                    <input type="radio" id="stepbrother-stepsister-example-relationships-error"
                                      class="ons-radio__input ons-js-radio" value="stepbrother-stepsister"
                                      name="relationship"
                                      data-title="Thinking of Joe Bloggs, Amanda Bloggs is their &lt;strong&gt;stepbrother or sister&lt;/strong&gt;"
                                      data-playback="Amanda Bloggs is Joe Bloggs&#39; &lt;strong&gt;stepbrother or sister&lt;/strong&gt;" />
                                    <label class=" ons-radio__label"
                                      for="stepbrother-stepsister-example-relationships-error"
                                      id="stepbrother-stepsister-example-relationships-error-label">Stepbrother or
                                      stepsister</label>
                                  </span>
                                </span>
                                <br />
                                <span class="ons-radios__item">
                                  <span class="ons-radio">
                                    <input type="radio" id="mother-father-example-relationships-error"
                                      class="ons-radio__input ons-js-radio" value="mother-father" name="relationship"
                                      data-title="Thinking of Joe Bloggs, Amanda Bloggs is their &lt;strong&gt;mother or father&lt;/strong&gt;"
                                      data-playback="Amanda Bloggs is Joe Bloggs&#39; &lt;strong&gt;mother or father&lt;/strong&gt;" />
                                    <label class=" ons-radio__label" for="mother-father-example-relationships-error"
                                      id="mother-father-example-relationships-error-label">Mother or father</label>
                                  </span>
                                </span>
                                <br />
                                <span class="ons-radios__item">
                                  <span class="ons-radio">
                                    <input type="radio" id="stepmother-stepfather-example-relationships-error"
                                      class="ons-radio__input ons-js-radio" value="stepmother-stepfather"
                                      name="relationship"
                                      data-title="Thinking of Joe Bloggs, Amanda Bloggs is their &lt;strong&gt;stepmother or stepfather&lt;/strong&gt;"
                                      data-playback="Amanda Bloggs is Joe Bloggs&#39; &lt;strong&gt;stepmother or stepfather&lt;/strong&gt;" />
                                    <label class=" ons-radio__label"
                                      for="stepmother-stepfather-example-relationships-error"
                                      id="stepmother-stepfather-example-relationships-error-label">Stepmother or
                                      stepfather</label>
                                  </span>
                                </span>
                                <br />
                                <span class="ons-radios__item">
                                  <span class="ons-radio">
                                    <input type="radio" id="grandchild-example-relationships-error"
                                      class="ons-radio__input ons-js-radio" value="grandchild" name="relationship"
                                      data-title="Thinking of Joe Bloggs, Amanda Bloggs is their &lt;strong&gt;grandchild&lt;/strong&gt;"
                                      data-playback="Amanda Bloggs is Joe Bloggs&#39; &lt;strong&gt;grandchild&lt;/strong&gt;" />
                                    <label class=" ons-radio__label" for="grandchild-example-relationships-error"
                                      id="grandchild-example-relationships-error-label">Grandchild</label>
                                  </span>
                                </span>
                                <br />
                                <span class="ons-radios__item">
                                  <span class="ons-radio">
                                    <input type="radio" id="grandparent-example-relationships-error"
                                      class="ons-radio__input ons-js-radio" value="grandparent" name="relationship"
                                      data-title="Thinking of Joe Bloggs, Amanda Bloggs is their &lt;strong&gt;grandparents&lt;/strong&gt;"
                                      data-playback="Amanda Bloggs is Joe Bloggs&#39; &lt;strong&gt;grandparents&lt;/strong&gt;" />
                                    <label class=" ons-radio__label" for="grandparent-example-relationships-error"
                                      id="grandparent-example-relationships-error-label">Grandparent</label>
                                  </span>
                                </span>
                                <br />
                                <span class="ons-radios__item">
                                  <span class="ons-radio">
                                    <input type="radio" id="other-relation-example-relationships-error"
                                      class="ons-radio__input ons-js-radio" value="other-relation" name="relationship"
                                      data-title="Thinking of Joe Bloggs, Amanda Bloggs is their &lt;strong&gt;other relation&lt;/strong&gt;"
                                      data-playback="Amanda Bloggs is Joe Bloggs&#39; &lt;strong&gt;other relation&lt;/strong&gt;" />
                                    <label class=" ons-radio__label" for="other-relation-example-relationships-error"
                                      id="other-relation-example-relationships-error-label">Other relation</label>
                                  </span>
                                </span>
                                <br />
                                <span class="ons-radios__item">
                                  <span class="ons-radio">
                                    <input type="radio" id="unrelated-example-relationships-error"
                                      class="ons-radio__input ons-js-radio" value="unrelated" name="relationship"
                                      data-title="Thinking of Joe Bloggs, Amanda Bloggs is &lt;strong&gt;unrelated&lt;/strong&gt; to Joe Bloggs"
                                      data-playback="Amanda Bloggs is &lt;strong&gt;unrelated&lt;/strong&gt; to Joe Bloggs" />
                                    <label class=" ons-radio__label ons-label--with-description"
                                      for="unrelated-example-relationships-error"
                                      aria-describedby="unrelated-example-relationships-error-label-description-hint"
                                      id="unrelated-example-relationships-error-label">Unrelated <span
                                        class="ons-label__aria-hidden-description" aria-hidden="true">
                                        <span
                                          class="ons-label__description ons-radio__label--with-description">Including
                                          foster child</span></span></label>
                                    <span class="ons-label__visually-hidden-description ons-u-vh"
                                      id="unrelated-example-relationships-error-label-description-hint">Including foster
                                      child</span>
                                  </span>
                                </span>
                              </div>
                            </div>
                          </div>
                        </div>
                        <p class="ons-relationships__playback ons-js-relationships-playback ons-u-d-no"
                          aria-live="polite">Amanda Bloggs is Joe Bloggs' <strong>…</strong></p>
                      </div>
                    </fieldset>
                  </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>
    <!-- prettier-ignore-start -->
    <script>
      (function() {
        var s = ['https://cdn.ons.gov.uk/sdc/design-system/72.0.1/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>
    <!-- prettier-ignore-end -->
    <div class="embeddable"></div>
    <style>
      body {
        height: auto;
      }
    </style>
    <script src="/js/main.js?t=1732268687213"></script>
  </body>

</html>

Research on this pattern

The relationships pattern was last user tested between April and September 2020 during research for Census 2021. This research found that users:

  • find the playback of the relationship after the radio options useful for checking their selection is correct
  • with large families find the pattern repetitive and expect the system to infer relationships based on previous answers, for example, the relationship between siblings after the parents have been defined
  • typically find it harder to answer third-person relationships than questions about their own relationship with someone
  • sometimes expect to manually enter the type of relationship after selecting the “Other relation” option
  • expect to be asked for a “preferred” name when answering for a household that has people with identical names, which would help them select the relationships

Help improve this page

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