On List, Record, Form, Stepped flow, Settings, Field result, Find, Help
Refusal
The remedy first shows the field it moves to.
Booking page
- Address
- oakmere
Two causes, each a Row further down the page.
Payments on invoice OH-INV-003
Bank transfer of £60.00 on
Not yet on your bank statement
Bank transfer of £24.00 on
Not yet on your bank statement
Marking both transfers arrived opens the same refund, no longer refused.
A Refusal beneath a Stepped flow's step.
- CompleteFile
- CompleteMapping
- Preview
- Not startedResult
Import is refused while these rows match more than one hirer:
A Refusal inside a Dialog, its causes on the page behind it.
Upcoming bookings in Main Hall
Oakmere Yoga
Riverside Scouts
Remove Main Hall
A Refusal on its line alone, with no cause to go to.
Issue refund is refused until both transfers on this invoice have arrived.
A submit refused by two fields, each cause going to its field.
Source
<form data-kit-layout="form" id="refusal-handle-form">
<div data-kit-region="notices" aria-live="polite"></div>
<section data-kit-region="task-context"><h2>Choose an address</h2></section>
<div data-kit-region="form-groups">
<div data-kit-region="notices" aria-live="polite"></div>
<div data-kit-role="form-group" data-kit-width="medium"><label for="refusal-handle">Address</label><input id="refusal-handle" name="handle" value="oakmere" /><output for="refusal-handle">oakmere</output></div>
</div>
<div data-kit-role="action-group" data-kit-region="submit-return">
<div data-kit-role="refusal" id="refusal-handle-taken" role="alert" aria-atomic="true">
<p data-kit-region="line">That address is taken. Choose another.</p>
<ul data-kit-region="causes"><li><a href="#refusal-handle">Use oakmere-hall</a></li></ul>
</div>
<button type="button" data-kit-role="primary-action"><span data-kit-region="label">Continue</span></button>
<a href="#refusal-booking-page" data-kit-role="way-back"><span data-kit-region="label">Return to booking page</span></a>
<p data-kit-role="status-line" role="status" aria-live="polite"></p></div>
</form>
<p class="specimen-case-line">The remedy first shows the field it moves to.</p>
<form data-kit-layout="form" id="refusal-mounted-form">
<div data-kit-region="notices" aria-live="polite"></div>
<section data-kit-region="task-context"><h2>Choose an address</h2></section>
<div data-kit-region="form-groups" id="refusal-mounted-fields"><div data-kit-region="notices" aria-live="polite"></div></div>
<div data-kit-role="action-group" data-kit-region="submit-return">
<div data-kit-role="refusal" id="refusal-mounted-taken" role="alert" aria-atomic="true">
<p data-kit-region="line">That address is taken. Choose another.</p>
<ul data-kit-region="causes"><li><a href="#refusal-mounted-fields">Use oakmere-hall</a></li></ul>
</div>
<button type="button" data-kit-role="primary-action"><span data-kit-region="label">Continue</span></button>
<a href="#refusal-booking-page" data-kit-role="way-back"><span data-kit-region="label">Return to booking page</span></a>
<p data-kit-role="status-line" role="status" aria-live="polite"></p></div>
</form>
<div data-kit-role="headed-region" id="refusal-booking-page">
<h3 data-kit-region="heading">Booking page</h3>
<div data-kit-region="content"><div data-kit-role="fact-group"><dl data-kit-role="labelled-fact"><dt data-kit-region="name">Address</dt><dd data-kit-region="value">oakmere</dd></dl></div></div>
</div>
<p class="specimen-case-line">Two causes, each a Row further down the page.</p>
<form data-kit-layout="form">
<div data-kit-region="notices" aria-live="polite"></div>
<section data-kit-region="task-context"><h2>Issue refund</h2><div data-kit-role="fact-group"><dl data-kit-role="labelled-fact"><dt data-kit-region="name">Hirer</dt><dd data-kit-region="value">Oakmere Primary School</dd></dl><dl data-kit-role="labelled-fact"><dt data-kit-region="name">Invoice</dt><dd data-kit-region="value"><code><span>OH-</span><span>INV-</span><span>003</span></code></dd></dl></div></section>
<div data-kit-region="form-groups">
<div data-kit-region="notices" aria-live="polite"></div>
<div data-kit-role="form-group" data-kit-width="narrow"><label for="refusal-refund-amount">Amount (GBP)</label><input id="refusal-refund-amount" name="amount" inputmode="decimal" value="84.00" /><output for="refusal-refund-amount">84.00</output></div>
<div data-kit-role="form-group" data-kit-width="medium"><label for="refusal-refund-reason">Reason</label><input id="refusal-refund-reason" name="reason" value="Returned materials" /><output for="refusal-refund-reason">Returned materials</output></div>
</div>
<section data-kit-role="inline-consequence" aria-label="Refund invoice OH-INV-003">
<h3 data-kit-region="subject">Invoice OH-INV-003</h3>
<p data-kit-region="consequence">Issuing this refund returns £84.00 to Oakmere Primary School.</p>
<p data-kit-region="effective-time">The refund is sent as soon as you confirm.</p>
<p data-kit-region="correction-path">A sent refund cannot be cancelled.</p>
</section>
<div data-kit-role="action-group" data-kit-region="submit-return">
<div data-kit-role="refusal" id="refusal-refund-1" role="alert" aria-atomic="true">
<p data-kit-region="line">Issue refund is refused until both transfers on this invoice have arrived:</p>
<ul data-kit-region="causes">
<li><a href="#refusal-transfer-march-12">Bank transfer of £60.00 on <time datetime="2025-03-12">12 March 2025</time></a></li>
<li><a href="#refusal-transfer-march-14">Bank transfer of £24.00 on <time datetime="2025-03-14">14 March 2025</time></a></li>
</ul>
</div>
<button type="button" data-kit-role="primary-action"><span data-kit-region="label">Issue refund</span></button><a href="#refusal-payments" data-kit-role="way-back"><span data-kit-region="label">Return to invoice</span></a>
<p data-kit-role="status-line" role="status" aria-live="polite"></p></div>
</form>
<section id="refusal-payments" aria-labelledby="refusal-payments-title">
<h3 id="refusal-payments-title">Payments on invoice OH-INV-003</h3>
<article data-kit-role="row" id="refusal-transfer-march-12"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><span data-kit-region="subject">Bank transfer of £60.00 on <time datetime="2025-03-12">12 March 2025</time></span></div><div data-kit-region="facts-column"><p data-kit-region="facts"><span data-kit-region="fact">Not yet on your bank statement</span></p></div></div></div></div></article>
<article data-kit-role="row" id="refusal-transfer-march-14"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><span data-kit-region="subject">Bank transfer of £24.00 on <time datetime="2025-03-14">14 March 2025</time></span></div><div data-kit-region="facts-column"><p data-kit-region="facts"><span data-kit-region="fact">Not yet on your bank statement</span></p></div></div></div></div></article>
<form action="../form/"><button type="submit" data-kit-role="secondary-action"><span data-kit-region="label">Mark both transfers arrived</span></button></form>
<p>Marking both transfers arrived opens the same refund, no longer refused.</p>
</section>
<p class="specimen-case-line">A Refusal beneath a Stepped flow's step.</p>
<div data-kit-layout="stepped-flow">
<div data-kit-region="notices" aria-live="polite"></div>
<ol data-kit-role="progress" data-kit-region="progress" aria-label="Import progress">
<li data-kit-region="step" data-kit-state="done"><span data-kit-region="standing">Complete</span><span data-kit-region="name">File</span></li>
<li data-kit-region="step" data-kit-state="done"><span data-kit-region="standing">Complete</span><span data-kit-region="name">Mapping</span></li>
<li data-kit-region="step" data-kit-state="current" aria-current="step"><span data-kit-region="name">Preview</span></li>
<li data-kit-region="step" data-kit-state="upcoming"><span data-kit-region="standing">Not started</span><span data-kit-region="name">Result</span></li>
</ol>
<form data-kit-region="current-step" id="refusal-preview-step" aria-labelledby="refusal-preview-title">
<h2 id="refusal-preview-title">Preview hirer import</h2>
<div data-kit-region="notices" aria-live="polite"></div>
<article data-kit-role="row" id="refusal-row-4"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><span data-kit-region="subject">Oakmere Primary School, row 4</span></div><div data-kit-region="facts-column"><p data-kit-region="facts"><span data-kit-region="fact">Row outcome: Matches two hirers</span></p></div></div></div></div></article>
<article data-kit-role="row" id="refusal-row-7"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><span data-kit-region="subject">Riverside Scouts, row 7</span></div><div data-kit-region="facts-column"><p data-kit-region="facts"><span data-kit-region="fact">Row outcome: Matches two hirers</span></p></div></div></div></div></article>
</form>
<div data-kit-role="action-group" data-kit-region="back-continue-or-commit"><div data-kit-region="refusal">
<div data-kit-role="refusal" id="refusal-merge" role="alert" aria-atomic="true">
<p data-kit-region="line">Import is refused while these rows match more than one hirer:</p>
<ul data-kit-region="causes">
<li><a href="#refusal-row-4">Oakmere Primary School, row 4</a></li>
<li><a href="#refusal-row-7">Riverside Scouts, row 7</a></li>
</ul>
</div>
</div>
<a href="#refusal-preview-title" data-kit-role="way-back"><span data-kit-region="label">Back to mapping</span></a><button type="submit" form="refusal-preview-step" data-kit-role="primary-action"><span data-kit-region="label">Import hirers</span></button><p data-kit-role="status-line" role="status" aria-live="polite"></p></div>
</div>
<p class="specimen-case-line">A Refusal inside a Dialog, its causes on the page behind it.</p>
<section aria-labelledby="refusal-bookings-title">
<h3 id="refusal-bookings-title">Upcoming bookings in Main Hall</h3>
<article data-kit-role="row" id="refusal-booking-yoga"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><span data-kit-region="subject">Oakmere Yoga</span></div><div data-kit-region="facts-column"><p data-kit-region="facts"><span data-kit-region="fact"><time datetime="2026-05-12T18:00+01:00"><span>12 May 2026</span><wbr><span>, 18:00–</span><wbr><span>19:30</span></time></span></p></div></div></div></div></article>
<article data-kit-role="row" id="refusal-booking-scouts"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><span data-kit-region="subject">Riverside Scouts</span></div><div data-kit-region="facts-column"><p data-kit-region="facts"><span data-kit-region="fact"><time datetime="2026-05-15T19:00+01:00"><span>15 May 2026</span><wbr><span>, 19:00–</span><wbr><span>21:00</span></time></span></p></div></div></div></div></article>
</section>
<details>
<summary>Remove Main Hall</summary>
<button type="button" id="refusal-remove-hall-dialog-opener" data-kit-role="secondary-action" commandfor="refusal-remove-hall-dialog" command="show-modal"><span data-kit-region="label">Remove Main Hall</span></button>
<dialog id="refusal-remove-hall-dialog" data-kit-role="dialog" data-kit-state="open" aria-labelledby="refusal-remove-hall-title">
<h2 data-kit-region="heading" id="refusal-remove-hall-title">Remove Main Hall</h2>
<section data-kit-role="inline-consequence" data-kit-region="consequence" aria-label="Remove Main Hall">
<h3 data-kit-region="subject">Main Hall</h3>
<p data-kit-region="consequence">Removing Main Hall takes it off your booking page and out of the diary.</p>
<p data-kit-region="effective-time">Takes effect as soon as you confirm.</p>
<p data-kit-region="correction-path">You can restore Main Hall from Trash.</p>
</section>
<div data-kit-role="action-group"><div data-kit-role="refusal" id="refusal-remove-hall" role="alert" aria-atomic="true">
<p data-kit-region="line">Remove Main Hall is refused while it has upcoming bookings:</p>
<ul data-kit-region="causes">
<li><a href="#refusal-booking-yoga">Oakmere Yoga, <time datetime="2026-05-12T18:00"><span>12 May 2026</span><wbr><span>, 18:00</span></time></a></li>
<li><a href="#refusal-booking-scouts">Riverside Scouts, <time datetime="2026-05-15T19:00"><span>15 May 2026</span><wbr><span>, 19:00</span></time></a></li>
</ul>
</div>
<div data-kit-region="actions">
<button type="button" data-kit-role="primary-action"><span data-kit-region="label">Remove hall</span></button>
<button type="button" data-kit-role="secondary-action" commandfor="refusal-remove-hall-dialog" command="close"><span data-kit-region="label">Keep hall</span></button>
</div><p data-kit-role="status-line" role="status" aria-live="polite"></p>
</div></dialog>
</details>
<p class="specimen-case-line">A Refusal on its line alone, with no cause to go to.</p>
<div>
<div data-kit-role="refusal" id="refusal-refund-line" role="alert" aria-atomic="true">
<p data-kit-region="line">Issue refund is refused until both transfers on this invoice have arrived.</p>
</div>
<div data-kit-role="action-group"><button type="button" data-kit-role="primary-action"><span data-kit-region="label">Issue refund</span></button></div>
</div>
<p class="specimen-case-line">A submit refused by two fields, each cause going to its field.</p>
<form id="refusal-fields-form">
<div data-kit-role="form-group" data-kit-state="error" id="refusal-fields-email-form-group">
<label for="refusal-fields-email">Billing email</label>
<input id="refusal-fields-email" name="email" type="email" value="accounts@" aria-invalid="true" aria-describedby="refusal-fields-email-form-group-error">
<output for="refusal-fields-email">accounts@</output>
<span data-kit-region="error" id="refusal-fields-email-form-group-error">Enter a complete billing email, such as aisha@oakmereprimary.org.</span>
</div>
<div data-kit-role="form-group" data-kit-state="error" id="refusal-fields-phone-form-group">
<label for="refusal-fields-phone">Phone</label>
<input id="refusal-fields-phone" name="phone" type="tel" value="960 123" aria-invalid="true" aria-describedby="refusal-fields-phone-form-group-error">
<output for="refusal-fields-phone">960 123</output>
<span data-kit-region="error" id="refusal-fields-phone-form-group-error">Enter the phone number with its area code, such as 01632 960 123.</span>
</div>
<div data-kit-role="refusal" id="refusal-fields" role="alert" aria-atomic="true">
<p data-kit-region="line">2 fields need a change.</p>
<ul data-kit-region="causes">
<li><a href="#refusal-fields-email">Enter a complete billing email, such as aisha@oakmereprimary.org.</a></li>
<li><a href="#refusal-fields-phone">Enter the phone number with its area code, such as 01632 960 123.</a></li>
</ul>
</div>
<div data-kit-role="action-group"><button type="button" data-kit-role="primary-action"><span data-kit-region="label">Save hirer</span></button></div>
</form>