Contents
<div class="govuk-form-group">
<fieldset class="govuk-fieldset" aria-describedby="handover-hint">
<legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
<h1 class="govuk-fieldset__heading">
Handover with regional delivery officer
</h1>
</legend>
<div id="handover-hint" class="govuk-hint">
Select all that apply.
</div>
<div class="govuk-checkboxes" data-module="govuk-checkboxes">
<div class="govuk-checkboxes__item">
<input class="govuk-checkboxes__input" id="handover" name="handover" type="checkbox" value="project-info"
aria-describedby="handover-item-hint">
<label class="govuk-label govuk-checkboxes__label" for="handover">
Review the project information, check the documents and carry out research
</label>
<div id="handover-item-hint" class="govuk-hint govuk-checkboxes__hint">
Check that no information is missing from the existing project documents and there are no errors.
<details class="govuk-details govuk-!-margin-top-3">
<summary class="govuk-details__summary">
<span class="govuk-details__summary-text">
What to check for
</span>
</summary>
<div class="govuk-details__text">
<p>
You should check existing project documents, including:
</p>
<ul>
<li>academy order</li>
<li>application to convert</li>
</ul>
<p>
Check that no information is missing and there are no errors. You should also research the background of the project before you meet with the regional delivery officer.
</p>
<p>
Things to check during your background research include:
</p>
<ul>
<li>project information, such as advisory board conditions</li>
<li>school or trust website for more information about the school</li>
<li>Google Maps for potential land issues</li>
</ul>
</div>
</details>
</div>
</div>
<div class="govuk-checkboxes__item">
<input class="govuk-checkboxes__input" id="handover-2" name="handover" type="checkbox" value="make-notes">
<label class="govuk-label govuk-checkboxes__label" for="handover-2">
<p>
Make notes and write questions to ask the regional delivery officer
</p>
<div class="govuk-hint">
<details class="govuk-details govuk-!-margin-top-3">
<summary class="govuk-details__summary">
<span class="govuk-details__summary-text">
What to make notes about
</span>
</summary>
<div class="govuk-details__text">
<p>
Note down things you want to ask and talk about with the regional delivery officer at the handover meeting.
</p>
<p>
This is an opportunity to clarify anything that you‘re unsure about after reviewing the project and doing your background research.
</p>
</div>
</details>
</div>
</label>
</div>
</div>
</fieldset>
</div>
{% from "govuk/components/checkboxes/macro.njk" import govukCheckboxes %}
{{ govukCheckboxes({
name: "handover",
fieldset: {
legend: {
text: "Handover with regional delivery officer",
isPageHeading: true,
classes: "govuk-fieldset__legend--l"
}
},
hint: {
text: "Select all that apply."
},
items: [
{
value: "project-info",
text: "Review the project information, check the documents and carry out research",
hint: {
html: 'Check that no information is missing from the existing project documents and there are no errors.
<details class="govuk-details govuk-!-margin-top-3">
<summary class="govuk-details__summary">
<span class="govuk-details__summary-text">
What to check for
</span>
</summary>
<div class="govuk-details__text">
<p>You should check existing project documents, including:</p>
<ul>
<li>academy order</li>
<li>application to convert</li>
</ul>
<p>Check that no information is missing and there are no errors. You should also research the background of the project before you meet with the regional delivery officer.</p>
<p>Things to check during your background research include:</p>
<ul>
<li>project information, such as advisory board conditions</li>
<li>school or trust website for more information about the school</li>
<li>Google Maps for potential land issues</li>
</ul>
</div>
</details>'
}
},
{
value: "make-notes",
html: '<p>
Make notes and write questions to ask the regional delivery officer
</p>
<div class="govuk-hint">
<details class="govuk-details govuk-!-margin-top-3">
<summary class="govuk-details__summary">
<span class="govuk-details__summary-text">
What to make notes about
</span>
</summary>
<div class="govuk-details__text">
<p>Note down things you want to ask and talk about with the regional delivery officer at the handover meeting.</p>
<p>This is an opportunity to clarify anything that you‘re unsure about after reviewing the project and doing your background research.</p>
</div>
</details>
</div>'
}
]
}) }}
When to use this pattern
Use this pattern if you need to present guidance that experienced users are likely to skip.
When not to use this pattern
Do not use this pattern for tasks that most users will only see once.
How it works
A details component with unique and descriptive wording below a task's hint text.
When expanded, the details component should contain enough information for a new user to be able to complete their task.
This information could be:
- context around the question or task
- a list of things they must do
- links to more guidance
Contents
<div class="govuk-form-group">
<fieldset class="govuk-fieldset" aria-describedby="handover-hint">
<legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
<h1 class="govuk-fieldset__heading">
Handover with regional delivery officer
</h1>
</legend>
<div id="handover-hint" class="govuk-hint">
Select all that apply.
</div>
<div class="govuk-checkboxes" data-module="govuk-checkboxes">
<div class="govuk-checkboxes__item">
<input class="govuk-checkboxes__input" id="handover" name="handover" type="checkbox" value="project-info"
aria-describedby="handover-item-hint">
<label class="govuk-label govuk-checkboxes__label" for="handover">
Review the project information, check the documents and carry out research
</label>
<div id="handover-item-hint" class="govuk-hint govuk-checkboxes__hint">
Check that no information is missing from the existing project documents and there are no errors.
<details class="govuk-details govuk-!-margin-top-3">
<summary class="govuk-details__summary">
<span class="govuk-details__summary-text">
What to check for
</span>
</summary>
<div class="govuk-details__text">
<p>
You should check existing project documents, including:
</p>
<ul>
<li>academy order</li>
<li>application to convert</li>
</ul>
<p>
Check that no information is missing and there are no errors. You should also research the background of the project before you meet with the regional delivery officer.
</p>
<p>
Things to check during your background research include:
</p>
<ul>
<li>project information, such as advisory board conditions</li>
<li>school or trust website for more information about the school</li>
<li>Google Maps for potential land issues</li>
</ul>
</div>
</details>
</div>
</div>
<div class="govuk-checkboxes__item">
<input class="govuk-checkboxes__input" id="handover-2" name="handover" type="checkbox" value="make-notes">
<label class="govuk-label govuk-checkboxes__label" for="handover-2">
<p>
Make notes and write questions to ask the regional delivery officer
</p>
<div class="govuk-hint">
<details class="govuk-details govuk-!-margin-top-3">
<summary class="govuk-details__summary">
<span class="govuk-details__summary-text">
What to make notes about
</span>
</summary>
<div class="govuk-details__text">
<p>
Note down things you want to ask and talk about with the regional delivery officer at the handover meeting.
</p>
<p>
This is an opportunity to clarify anything that you‘re unsure about after reviewing the project and doing your background research.
</p>
</div>
</details>
</div>
</label>
</div>
</div>
</fieldset>
</div>
{% from "govuk/components/checkboxes/macro.njk" import govukCheckboxes %}
{{ govukCheckboxes({
name: "handover",
fieldset: {
legend: {
text: "Handover with regional delivery officer",
isPageHeading: true,
classes: "govuk-fieldset__legend--l"
}
},
hint: {
text: "Select all that apply."
},
items: [
{
value: "project-info",
text: "Review the project information, check the documents and carry out research",
hint: {
html: 'Check that no information is missing from the existing project documents and there are no errors.
<details class="govuk-details govuk-!-margin-top-3">
<summary class="govuk-details__summary">
<span class="govuk-details__summary-text">
What to check for
</span>
</summary>
<div class="govuk-details__text">
<p>You should check existing project documents, including:</p>
<ul>
<li>academy order</li>
<li>application to convert</li>
</ul>
<p>Check that no information is missing and there are no errors. You should also research the background of the project before you meet with the regional delivery officer.</p>
<p>Things to check during your background research include:</p>
<ul>
<li>project information, such as advisory board conditions</li>
<li>school or trust website for more information about the school</li>
<li>Google Maps for potential land issues</li>
</ul>
</div>
</details>'
}
},
{
value: "make-notes",
html: '<p>
Make notes and write questions to ask the regional delivery officer
</p>
<div class="govuk-hint">
<details class="govuk-details govuk-!-margin-top-3">
<summary class="govuk-details__summary">
<span class="govuk-details__summary-text">
What to make notes about
</span>
</summary>
<div class="govuk-details__text">
<p>Note down things you want to ask and talk about with the regional delivery officer at the handover meeting.</p>
<p>This is an opportunity to clarify anything that you‘re unsure about after reviewing the project and doing your background research.</p>
</div>
</details>
</div>'
}
]
}) }}
Hint text
You should still use hint text for information that could be useful even to experienced users, like reminding them to check something.
Links to more guidance
Try to avoid using this pattern to reveal standalone links. Consider whether you could save the user unnecessary clicks by moving the link somewhere else or providing the information another way.
Research on this pattern
The pattern is being used in Complete conversions, transfers and changes to meet this need from our user needs database (opens in DfE Microsoft List):
User need 97: When I'm working on an academisation or free schools project, I need to see only the relevant guidance I need to complete my task, so that I don't waste time reading things I already know and I am using tools correctly to support a school converting to an academy, an academy transferring from one trust to another or a new free school opening.