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
| Name | Type | Required | Description |
|---|---|---|---|
| id | string | false | The HTML id of the component |
| classes | string | false | Sets custom classes to add to the component |
| playback | string | true | Sets the placeholder text for the playback of the answer that follows the radios, for example, "Joe Bloggs is your ...". This can contain HTML. |
| radios | Array<Radio> ref | true | Sets an array of radio options. Each option must contain data-title and data-playback attributes. |
| name | string | false | The HTML name attribute for the component |
| dontWrap | boolean | false | Prevents the radio inputs from being wrapped in the fieldset component |
| legendIsQuestionTitle | boolean | false | Creates 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/70.0.4/css/main.css">
<link rel="stylesheet" media="print" href="https://cdn.ons.gov.uk/sdc/design-system/70.0.4/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/70.0.4/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/70.0.4/favicons/favicon.ico">
<link rel="icon" type="image/png" href="https://cdn.ons.gov.uk/sdc/design-system/70.0.4/favicons/favicon-32x32.png"
sizes="32x32">
<link rel="icon" type="image/png" href="https://cdn.ons.gov.uk/sdc/design-system/70.0.4/favicons/favicon-16x16.png"
sizes="16x16">
<link rel="mask-icon" href="https://cdn.ons.gov.uk/sdc/design-system/70.0.4/favicons/safari-pinned-tab.svg"
color="#000000">
<link rel="apple-touch-icon" type="image/png"
href="https://cdn.ons.gov.uk/sdc/design-system/70.0.4/favicons/apple-touch-icon.png" sizes="180x180">
<link rel="manifest" href="https://cdn.ons.gov.uk/sdc/design-system/70.0.4/favicons/manifest.json">
</head>
<body>
<script>
document.body.className = ((document.body.className) ? document.body.className + ' ons-js-enabled' :
'ons-js-enabled');
</script>
<div class="ons-page">
<div class="ons-page__content">
<a class="ons-skip-to-content" href="#main-content">Skip to main content</a>
<header class="ons-header" role="banner">
<div class="ons-browser-banner">
<div class="ons-container">
<p class="ons-browser-banner__content"><span class="ons-browser-banner__lead">This website no longer
supports your browser.</span><span class="ons-browser-banner__cta"> You can <a
class="ons-browser-banner__link" href="https://www.ons.gov.uk/help/browsers">upgrade your browser to
the latest version</a>.</span></p>
</div>
</div>
<div class="ons-header__top">
<div class="ons-container">
<div
class="ons-header__grid-top ons-grid ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--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="197" height="19"
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--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap">
<div class="ons-grid__col ons-col-auto ons-u-flex-shrink">
<div class="ons-header__title">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-l">
<div class="ons-question__answer ons-u-mb-m">
<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-m">
<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 <strong>husband or wife</strong>"
data-playback="Amanda Bloggs is Joe Bloggs' <strong>husband or wife</strong>">
<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 <strong>legally registered civil partner</strong>"
data-playback="Amanda Bloggs is Joe Bloggs' <strong>legally registered civil partner</strong>">
<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 <strong>partner</strong>"
data-playback="Amanda Bloggs is Joe Bloggs' <strong>partner</strong>">
<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 <strong>son or daughter</strong>"
data-playback="Amanda Bloggs is Joe Bloggs' <strong>son or daughter</strong>">
<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 <strong>stepchild</strong>"
data-playback="Amanda Bloggs is Joe Bloggs' <strong>stepchild</strong>">
<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 <strong>brother or sister</strong>"
data-playback="Amanda Bloggs is Joe Bloggs' <strong>brother or sister</strong>">
<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 <strong>stepbrother or sister</strong>"
data-playback="Amanda Bloggs is Joe Bloggs' <strong>stepbrother or sister</strong>">
<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 <strong>mother or father</strong>"
data-playback="Amanda Bloggs is Joe Bloggs' <strong>mother or father</strong>">
<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 <strong>stepmother or stepfather</strong>"
data-playback="Amanda Bloggs is Joe Bloggs' <strong>stepmother or stepfather</strong>">
<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 <strong>grandchild</strong>"
data-playback="Amanda Bloggs is Joe Bloggs' <strong>grandchild</strong>">
<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 <strong>grandparents</strong>"
data-playback="Amanda Bloggs is Joe Bloggs' <strong>grandparents</strong>">
<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 <strong>other relation</strong>"
data-playback="Amanda Bloggs is Joe Bloggs' <strong>other relation</strong>">
<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 <strong>unrelated</strong> to Joe Bloggs"
data-playback="Amanda Bloggs is <strong>unrelated</strong> 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>
<script>
(function() {
var s = ['https://cdn.ons.gov.uk/sdc/design-system/70.0.4/scripts/main.js'],
c = document.createElement('script');
if (!('noModule' in c)) {
for (var i = 0; i < s.length; i++) {
s[i] = s[i].replace('.js', '.es5.js');
}
}
for (var i = 0; i < s.length; i++) {
var e = document.createElement('script');
e.src = s[i];
document.body.appendChild(e);
}
})();
</script>
<div class="embeddable"></div>
<style>
body {
height: auto;
}
</style>
<script src="/js/main.js?t=1713369147306"></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
| Name | Type | Required | Description |
|---|---|---|---|
| id | string | false | The HTML id of the component |
| classes | string | false | Sets custom classes to add to the component |
| playback | string | true | Sets the placeholder text for the playback of the answer that follows the radios, for example, "Joe Bloggs is your ...". This can contain HTML. |
| radios | Array<Radio> ref | true | Sets an array of radio options. Each option must contain data-title and data-playback attributes. |
| name | string | false | The HTML name attribute for the component |
| dontWrap | boolean | false | Prevents the radio inputs from being wrapped in the fieldset component |
| legendIsQuestionTitle | boolean | false | Creates 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/70.0.4/css/main.css">
<link rel="stylesheet" media="print" href="https://cdn.ons.gov.uk/sdc/design-system/70.0.4/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/70.0.4/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/70.0.4/favicons/favicon.ico">
<link rel="icon" type="image/png" href="https://cdn.ons.gov.uk/sdc/design-system/70.0.4/favicons/favicon-32x32.png"
sizes="32x32">
<link rel="icon" type="image/png" href="https://cdn.ons.gov.uk/sdc/design-system/70.0.4/favicons/favicon-16x16.png"
sizes="16x16">
<link rel="mask-icon" href="https://cdn.ons.gov.uk/sdc/design-system/70.0.4/favicons/safari-pinned-tab.svg"
color="#000000">
<link rel="apple-touch-icon" type="image/png"
href="https://cdn.ons.gov.uk/sdc/design-system/70.0.4/favicons/apple-touch-icon.png" sizes="180x180">
<link rel="manifest" href="https://cdn.ons.gov.uk/sdc/design-system/70.0.4/favicons/manifest.json">
</head>
<body>
<script>
document.body.className = ((document.body.className) ? document.body.className + ' ons-js-enabled' :
'ons-js-enabled');
</script>
<div class="ons-page">
<div class="ons-page__content">
<a class="ons-skip-to-content" href="#main-content">Skip to main content</a>
<header class="ons-header" role="banner">
<div class="ons-browser-banner">
<div class="ons-container">
<p class="ons-browser-banner__content"><span class="ons-browser-banner__lead">This website no longer
supports your browser.</span><span class="ons-browser-banner__cta"> You can <a
class="ons-browser-banner__link" href="https://www.ons.gov.uk/help/browsers">upgrade your browser to
the latest version</a>.</span></p>
</div>
</div>
<div class="ons-header__top">
<div class="ons-container">
<div
class="ons-header__grid-top ons-grid ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--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="197" height="19"
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--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap">
<div class="ons-grid__col ons-col-auto ons-u-flex-shrink">
<div class="ons-header__title">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-l">
<div class="ons-question__answer ons-u-mb-m">
<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-m">
<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 <strong>husband or wife</strong>"
data-playback="Joe Bloggs is your <strong>husband or wife</strong>">
<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 <strong>legally registered civil partner</strong>"
data-playback="Joe Bloggs is your <strong>legally registered civil partner</strong>">
<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 <strong>partner</strong>"
data-playback="Joe Bloggs is your <strong>partner</strong>">
<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 <strong>son or daughter</strong>"
data-playback="Joe Bloggs is your <strong>son or daughter</strong>">
<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 <strong>stepchild</strong>"
data-playback="Joe Bloggs is your <strong>stepchild</strong>">
<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 <strong>brother or sister</strong>"
data-playback="Joe Bloggs is your <strong>brother or sister</strong>">
<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 <strong>stepbrother or sister</strong>"
data-playback="Joe Bloggs is your <strong>stepbrother or sister</strong>">
<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 <strong>mother or father</strong>"
data-playback="Joe Bloggs is your <strong>mother or father</strong>">
<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 <strong>stepmother or stepfather</strong>"
data-playback="Joe Bloggs is your <strong>stepmother or stepfather</strong>">
<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 <strong>grandchild</strong>"
data-playback="Joe Bloggs is your <strong>grandchild</strong>">
<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 <strong>grandparent</strong>"
data-playback="Joe Bloggs is your <strong>grandparent</strong>">
<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 <strong>other relation</strong>"
data-playback="Joe Bloggs is your <strong>other relation</strong>">
<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 <strong>unrelated</strong> to you"
data-playback="Joe Bloggs is <strong>unrelated</strong> 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>
<script>
(function() {
var s = ['https://cdn.ons.gov.uk/sdc/design-system/70.0.4/scripts/main.js'],
c = document.createElement('script');
if (!('noModule' in c)) {
for (var i = 0; i < s.length; i++) {
s[i] = s[i].replace('.js', '.es5.js');
}
}
for (var i = 0; i < s.length; i++) {
var e = document.createElement('script');
e.src = s[i];
document.body.appendChild(e);
}
})();
</script>
<div class="embeddable"></div>
<style>
body {
height: auto;
}
</style>
<script src="/js/main.js?t=1713369147306"></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
| Name | Type | Required | Description |
|---|---|---|---|
| id | string | false | The HTML id of the component |
| classes | string | false | Sets custom classes to add to the component |
| playback | string | true | Sets the placeholder text for the playback of the answer that follows the radios, for example, "Joe Bloggs is your ...". This can contain HTML. |
| radios | Array<Radio> ref | true | Sets an array of radio options. Each option must contain data-title and data-playback attributes. |
| name | string | false | The HTML name attribute for the component |
| dontWrap | boolean | false | Prevents the radio inputs from being wrapped in the fieldset component |
| legendIsQuestionTitle | boolean | false | Creates 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/70.0.4/css/main.css">
<link rel="stylesheet" media="print" href="https://cdn.ons.gov.uk/sdc/design-system/70.0.4/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/70.0.4/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/70.0.4/favicons/favicon.ico">
<link rel="icon" type="image/png" href="https://cdn.ons.gov.uk/sdc/design-system/70.0.4/favicons/favicon-32x32.png"
sizes="32x32">
<link rel="icon" type="image/png" href="https://cdn.ons.gov.uk/sdc/design-system/70.0.4/favicons/favicon-16x16.png"
sizes="16x16">
<link rel="mask-icon" href="https://cdn.ons.gov.uk/sdc/design-system/70.0.4/favicons/safari-pinned-tab.svg"
color="#000000">
<link rel="apple-touch-icon" type="image/png"
href="https://cdn.ons.gov.uk/sdc/design-system/70.0.4/favicons/apple-touch-icon.png" sizes="180x180">
<link rel="manifest" href="https://cdn.ons.gov.uk/sdc/design-system/70.0.4/favicons/manifest.json">
</head>
<body>
<script>
document.body.className = ((document.body.className) ? document.body.className + ' ons-js-enabled' :
'ons-js-enabled');
</script>
<div class="ons-page">
<div class="ons-page__content">
<a class="ons-skip-to-content" href="#main-content">Skip to main content</a>
<header class="ons-header" role="banner">
<div class="ons-browser-banner">
<div class="ons-container">
<p class="ons-browser-banner__content"><span class="ons-browser-banner__lead">This website no longer
supports your browser.</span><span class="ons-browser-banner__cta"> You can <a
class="ons-browser-banner__link" href="https://www.ons.gov.uk/help/browsers">upgrade your browser to
the latest version</a>.</span></p>
</div>
</div>
<div class="ons-header__top">
<div class="ons-container">
<div
class="ons-header__grid-top ons-grid ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--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="197" height="19"
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--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap">
<div class="ons-grid__col ons-col-auto ons-u-flex-shrink">
<div class="ons-header__title">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-l">
<div class="ons-question__answer ons-u-mb-m">
<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-m">
<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 <strong>husband or wife</strong>"
data-playback="Amanda Bloggs is Joe Bloggs' <strong>husband or wife</strong>">
<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 <strong>legally registered civil partner</strong>"
data-playback="Amanda Bloggs is Joe Bloggs' <strong>legally registered civil partner</strong>">
<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 <strong>partner</strong>"
data-playback="Amanda Bloggs is Joe Bloggs' <strong>partner</strong>">
<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 <strong>son or daughter</strong>"
data-playback="Amanda Bloggs is Joe Bloggs' <strong>son or daughter</strong>">
<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 <strong>stepchild</strong>"
data-playback="Amanda Bloggs is Joe Bloggs' <strong>stepchild</strong>">
<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 <strong>brother or sister</strong>"
data-playback="Amanda Bloggs is Joe Bloggs' <strong>brother or sister</strong>">
<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 <strong>stepbrother or sister</strong>"
data-playback="Amanda Bloggs is Joe Bloggs' <strong>stepbrother or sister</strong>">
<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 <strong>mother or father</strong>"
data-playback="Amanda Bloggs is Joe Bloggs' <strong>mother or father</strong>">
<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 <strong>stepmother or stepfather</strong>"
data-playback="Amanda Bloggs is Joe Bloggs' <strong>stepmother or stepfather</strong>">
<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 <strong>grandchild</strong>"
data-playback="Amanda Bloggs is Joe Bloggs' <strong>grandchild</strong>">
<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 <strong>grandparents</strong>"
data-playback="Amanda Bloggs is Joe Bloggs' <strong>grandparents</strong>">
<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 <strong>other relation</strong>"
data-playback="Amanda Bloggs is Joe Bloggs' <strong>other relation</strong>">
<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 <strong>unrelated</strong> to Joe Bloggs"
data-playback="Amanda Bloggs is <strong>unrelated</strong> 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>
<script>
(function() {
var s = ['https://cdn.ons.gov.uk/sdc/design-system/70.0.4/scripts/main.js'],
c = document.createElement('script');
if (!('noModule' in c)) {
for (var i = 0; i < s.length; i++) {
s[i] = s[i].replace('.js', '.es5.js');
}
}
for (var i = 0; i < s.length; i++) {
var e = document.createElement('script');
e.src = s[i];
document.body.appendChild(e);
}
})();
</script>
<div class="embeddable"></div>
<style>
body {
height: auto;
}
</style>
<script src="/js/main.js?t=1713369147306"></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)