Form

<div data-kit-layout="shell" data-kit-density="desk">
  <a data-kit-region="skip-link" href="#kit-shell-subject">Skip to content</a>
  <div data-kit-region="identity-strip"><div data-kit-role="identity"><span data-kit-mark aria-hidden="true">k</span><span data-kit-wordmark>kit</span></div></div>
  <header data-kit-region="header">
    <div><h1 data-kit-region="subject" id="kit-shell-subject" tabindex="-1">Review a refund for the Oakmere Primary School invoice</h1><p data-kit-region="lede"><span>CSS core</span><span>Layout example</span></p></div>
    <div data-kit-region="actions"><a href="../layout-form/#layout-form">CSS core</a></div>
  </header>
  <main data-kit-region="body">
    <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><dl data-kit-role="labelled-fact"><dt data-kit-region="name">Paid</dt><dd data-kit-region="value" data-kit-role="amount">£120.00</dd><dd data-kit-region="supporting">In full</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" data-kit-holds="help"><label for="refund-amount">Amount (GBP)</label><input id="refund-amount" name="amount" inputmode="decimal" value="120.00" aria-describedby="refund-amount-help" /><output for="refund-amount">120.00</output><span data-kit-region="help" id="refund-amount-help">Up to the £120.00 paid on this invoice.</span></div>
        <div data-kit-role="form-group" data-kit-width="medium"><label for="refund-reason">Reason</label><input id="refund-reason" name="reason" value="Returned materials" /><output for="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 £120.00 to the original payment method.</p>
        <p data-kit-region="effective-time">The refund is submitted as soon as you confirm.</p>
        <p data-kit-region="correction-path">A submitted refund cannot be cancelled. Review the amount and reason before confirming, or <a href="../record/">return to the invoice</a>.</p>
      </section>
      <div data-kit-role="action-group" data-kit-region="submit-return"><button type="button" data-kit-role="primary-action"><span data-kit-region="label">Issue refund</span></button><a href="../record/" 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>
    <form data-kit-layout="form" id="layout-form-heading-only">
      <div data-kit-region="notices" aria-live="polite"></div>
      <section data-kit-region="task-context"><h2>Rename the hall</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="hall-name">Name</label><input id="hall-name" name="name" value="Oakmere Hall" /><output for="hall-name">Oakmere Hall</output></div>
      </div>
      <div data-kit-role="action-group" data-kit-region="submit-return"><button type="button" data-kit-role="primary-action"><span data-kit-region="label">Rename</span></button><p data-kit-role="status-line" role="status" aria-live="polite"></p></div>
    </form>
    <form data-kit-layout="form" id="layout-form-heading-only-inert">
      <div data-kit-region="notices" aria-live="polite"></div>
      <section data-kit-region="task-context"><h2>Rename the hall</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="hall-name-inert">Name</label><input id="hall-name-inert" name="name" value="Oakmere Hall" /><output for="hall-name-inert">Oakmere Hall</output></div>
      </div>
      <div data-kit-role="action-group" data-kit-region="submit-return" data-kit-holds="words"><button type="button" data-kit-role="primary-action" id="rename-hall-action" data-kit-state="inert" disabled aria-describedby="rename-hall-action-words"><span data-kit-region="label">Rename</span></button><p data-kit-region="words" id="rename-hall-action-words">Confirm the hall name before renaming.</p><p data-kit-role="status-line" role="status" aria-live="polite"></p></div>
    </form>
    <form data-kit-layout="form">
      <div data-kit-region="notices" aria-live="polite"></div>
      <div data-kit-region="form-groups">
        <div data-kit-region="notices" aria-live="polite"></div>
        <div data-kit-region="form-row-list" style="--kit-form-row-columns: 2;">
          <div data-kit-region="form-row">
            <div data-kit-role="form-group" data-kit-width="narrow"><label for="form-row-count-1">Count</label><input id="form-row-count-1" name="count-1" value="1" /><output for="form-row-count-1">1</output></div>
            <div data-kit-role="form-group" data-kit-width="narrow"><label for="form-row-amount-1">Amount</label><input id="form-row-amount-1" name="amount-1" value="20" /><output for="form-row-amount-1">20</output></div>
            <label><input type="hidden" name="and-more-1" value="false" /><input data-kit-role="selection-control" type="checkbox" id="form-row-mark-1" name="and-more-1" /><span>This count and more</span><output>Not marked</output></label>
            <button type="button" data-kit-role="secondary-action" aria-label="Remove row 1"><span data-kit-region="label">Remove</span></button>
          </div>
          <div data-kit-region="form-row">
            <div data-kit-role="form-group" data-kit-width="narrow"><label for="form-row-count-2">Count</label><input id="form-row-count-2" name="count-2" value="2" /><output for="form-row-count-2">2</output></div>
            <div data-kit-role="form-group" data-kit-width="narrow"><label for="form-row-amount-2">Amount</label><input id="form-row-amount-2" name="amount-2" value="35" /><output for="form-row-amount-2">35</output></div>
            <label><input type="hidden" name="and-more-2" value="false" /><input data-kit-role="selection-control" type="checkbox" id="form-row-mark-2" name="and-more-2" checked /><span>This count and more</span><output>Marked</output></label>
            <button type="button" data-kit-role="secondary-action" aria-label="Remove row 2"><span data-kit-region="label">Remove</span></button>
          </div>
          <button type="button" id="form-row-add" data-kit-role="secondary-action" data-kit-state="inert" disabled aria-describedby="form-row-add-words"><span data-kit-region="label">Add a count</span></button>
          <p data-kit-region="words" id="form-row-add-words">Save these counts before adding another.</p>
          <p data-kit-role="status-line" role="status" aria-live="polite">Count 2 added.</p>
        </div>
      </div>
      <div data-kit-role="action-group" data-kit-region="submit-return"><button type="button" data-kit-role="primary-action"><span data-kit-region="label">Save</span></button><p data-kit-role="status-line" role="status" aria-live="polite"></p></div>
    </form>
    <form data-kit-layout="form" id="layout-form-stacked-rows">
      <div data-kit-region="notices" aria-live="polite"></div>
      <section data-kit-region="task-context"><h2>Send the booking confirmation</h2></section>
      <div data-kit-region="form-groups">
        <div data-kit-region="notices" aria-live="polite"></div>
        <div data-kit-region="form-row-list" style="--kit-form-row-columns: 2;">
          <div data-kit-region="form-row">
            <div data-kit-role="form-group" data-kit-width="medium"><label for="stacked-rows-name-1">Name</label><input id="stacked-rows-name-1" name="name-1" value="Grace Adeyemi" /><output for="stacked-rows-name-1">Grace Adeyemi</output></div>
            <div data-kit-role="form-group" data-kit-width="wide"><label for="stacked-rows-email-1">Email</label><input id="stacked-rows-email-1" name="email-1" type="email" value="grace.adeyemi@example.com" /><output for="stacked-rows-email-1">grace.adeyemi@example.com</output></div>
            <label><input type="hidden" name="invoice-1" value="false" /><input data-kit-role="selection-control" type="checkbox" id="stacked-rows-mark-1" name="invoice-1" checked /><span>Send the invoice too</span><output>Marked</output></label>
            <button type="button" data-kit-role="secondary-action" aria-label="Remove Grace Adeyemi"><span data-kit-region="label">Remove</span></button>
          </div>
          <div data-kit-region="form-row">
            <div data-kit-role="form-group" data-kit-width="medium"><label for="stacked-rows-name-2">Name</label><input id="stacked-rows-name-2" name="name-2" value="Tom Whitfield" /><output for="stacked-rows-name-2">Tom Whitfield</output></div>
            <div data-kit-role="form-group" data-kit-width="wide"><label for="stacked-rows-email-2">Email</label><input id="stacked-rows-email-2" name="email-2" type="email" value="tom.whitfield@example.com" /><output for="stacked-rows-email-2">tom.whitfield@example.com</output></div>
            <label><input type="hidden" name="invoice-2" value="false" /><input data-kit-role="selection-control" type="checkbox" id="stacked-rows-mark-2" name="invoice-2" /><span>Send the invoice too</span><output>Not marked</output></label>
            <button type="button" data-kit-role="secondary-action" aria-label="Remove Tom Whitfield"><span data-kit-region="label">Remove</span></button>
          </div>
          <button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Add a recipient</span></button>
        </div>
      </div>
      <div data-kit-role="action-group" data-kit-region="submit-return"><button type="button" data-kit-role="primary-action"><span data-kit-region="label">Send</span></button><p data-kit-role="status-line" role="status" aria-live="polite"></p></div>
    </form>
    <form data-kit-layout="form" id="layout-form-part-list">
      <div data-kit-region="notices" aria-live="polite"></div>
      <section data-kit-region="task-context"><h2>Hall contacts</h2></section>
      <div data-kit-region="form-groups">
        <div data-kit-region="notices" aria-live="polite"></div>
        <div data-kit-region="form-part-list">
          <div data-kit-role="headed-region" data-kit-holds="subtle-action">
            <h3 data-kit-region="heading">Maria Fernanda Oliveira dos Santos Pereira</h3>
            <button type="button" data-kit-role="subtle-action" aria-label="Remove Maria Fernanda Oliveira dos Santos Pereira" id="part-list-remove-1" data-kit-state="inert" disabled aria-describedby="part-list-remove-1-words"><span data-kit-region="label">Remove</span></button>
            <p data-kit-region="words" id="part-list-remove-1-words">Confirm this contact before removing it.</p>
            <div data-kit-region="content">
              <div data-kit-region="form-row">
                <div data-kit-role="form-group" data-kit-width="medium"><label for="part-list-name-1">Name</label><input id="part-list-name-1" name="name-1" value="Maria Fernanda Oliveira dos Santos Pereira" /><output for="part-list-name-1">Maria Fernanda Oliveira dos Santos Pereira</output></div>
                <div data-kit-role="form-group" data-kit-width="medium"><label for="part-list-phone-1">Phone</label><input id="part-list-phone-1" name="phone-1" type="tel" value="07700 900123" /><output for="part-list-phone-1">07700 900123</output></div>
              </div>
              <div data-kit-role="form-group" data-kit-width="wide"><label for="part-list-email-1">Email</label><input id="part-list-email-1" name="email-1" type="email" value="maria.santos@example.com" /><output for="part-list-email-1">maria.santos@example.com</output></div>
            </div>
          </div>
          <div data-kit-role="headed-region" data-kit-holds="subtle-action">
            <h3 data-kit-region="heading">Contact 2</h3>
            <button type="button" data-kit-role="subtle-action" aria-label="Remove contact 2" id="part-list-remove-2" data-kit-state="inert" disabled aria-describedby="part-list-remove-2-words"><span data-kit-region="label">Remove</span></button>
            <p data-kit-region="words" id="part-list-remove-2-words">Confirm this contact before removing it.</p>
            <div data-kit-region="content">
              <div data-kit-region="form-row">
                <div data-kit-role="form-group" data-kit-width="medium"><label for="part-list-name-2">Name</label><input id="part-list-name-2" name="name-2" /><output for="part-list-name-2">No name given</output></div>
                <div data-kit-role="form-group" data-kit-width="medium"><label for="part-list-phone-2">Phone</label><input id="part-list-phone-2" name="phone-2" type="tel" /><output for="part-list-phone-2">No phone number given</output></div>
              </div>
              <div data-kit-role="form-group" data-kit-width="wide"><label for="part-list-email-2">Email</label><input id="part-list-email-2" name="email-2" type="email" /><output for="part-list-email-2">No email given</output></div>
            </div>
          </div>
          <button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Add another contact</span></button>
          <p data-kit-role="status-line" role="status" aria-live="polite">Contact 2 added.</p>
        </div>
      </div>
      <div data-kit-role="action-group" data-kit-region="submit-return"><button type="button" data-kit-role="primary-action"><span data-kit-region="label">Save contacts</span></button><p data-kit-role="status-line" role="status" aria-live="polite"></p></div>
    </form>
    <form data-kit-layout="form" id="layout-form-section-notice">
      <div data-kit-region="notices" aria-live="polite"></div>
      <section data-kit-region="task-context"><h2>Open Oakmere Hall for hire</h2></section>
      <div data-kit-region="form-groups">
        <div data-kit-region="notices" aria-live="polite"></div>
        <div data-kit-role="headed-region">
          <h3 data-kit-region="heading">Hire rates</h3>
          <div data-kit-region="content">
            <p data-kit-role="scope-line">These rates apply to bookings made from tomorrow.</p>
            <div data-kit-region="notices" aria-live="polite">
              <div data-kit-role="notice" data-kit-state="attention">
                <svg data-kit-icon="warning" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M236.8,188.09,149.35,36.22h0a24.76,24.76,0,0,0-42.7,0L19.2,188.09a23.51,23.51,0,0,0,0,23.72A24.35,24.35,0,0,0,40.55,224h174.9a24.35,24.35,0,0,0,21.33-12.19A23.51,23.51,0,0,0,236.8,188.09ZM222.93,203.8a8.5,8.5,0,0,1-7.48,4.2H40.55a8.5,8.5,0,0,1-7.48-4.2,7.59,7.59,0,0,1,0-7.72L120.52,44.21a8.75,8.75,0,0,1,15,0l87.45,151.87A7.59,7.59,0,0,1,222.93,203.8ZM120,144V104a8,8,0,0,1,16,0v40a8,8,0,0,1-16,0Zm20,36a12,12,0,1,1-12-12A12,12,0,0,1,140,180Z"/></svg>
                <p data-kit-region="standing">Two rooms have no hourly rate</p>
                <p data-kit-region="sentence">A booking for either cannot be priced until it has one.</p>
                <div data-kit-region="action"><a href="../settings/">Set room rates</a></div>
              </div>
            </div>
            <div data-kit-role="form-group" data-kit-width="narrow"><label for="section-notice-deposit">Deposit (GBP)</label><input id="section-notice-deposit" name="deposit" inputmode="decimal" value="50.00" /><output for="section-notice-deposit">50.00</output></div>
          </div>
        </div>
        <div data-kit-role="headed-region">
          <h3 data-kit-region="heading">Enquiries</h3>
          <div data-kit-region="content">
            <div data-kit-role="form-group" data-kit-width="wide"><label for="section-notice-email">Email for enquiries</label><input id="section-notice-email" name="email" type="email" value="bookings@oakmere.example" /><output for="section-notice-email">bookings@oakmere.example</output></div>
          </div>
        </div>
      </div>
      <div data-kit-role="action-group" data-kit-region="submit-return"><button type="button" data-kit-role="primary-action"><span data-kit-region="label">Open for hire</span></button><p data-kit-role="status-line" role="status" aria-live="polite"></p></div>
    </form>
    <form data-kit-layout="form" id="layout-form-facts">
      <div data-kit-region="notices" aria-live="polite"></div>
      <section data-kit-region="task-context"><h2>Send the hire invoice</h2></section>
      <div data-kit-region="form-groups">
        <div data-kit-region="notices" aria-live="polite"></div>
        <fieldset data-kit-role="selection-control" data-kit-region="group" id="invoice-delivery">
          <legend>Send by</legend>
          <label><input data-kit-role="selection-control" type="radio" name="invoice-delivery-group" value="email" checked><span>Email</span><output>Chosen</output></label>
          <label><input data-kit-role="selection-control" type="radio" name="invoice-delivery-group" value="post"><span>Post</span><output>Not chosen</output></label>
        </fieldset>
        <div data-kit-role="fact-group">
          <dl data-kit-role="labelled-fact"><dt data-kit-region="name">Goes to</dt><dd data-kit-region="value"><span data-kit-region="email"><span><span>aisha@</span><wbr /><span>oakmereprimary.org</span></span></span></dd></dl>
          <dl data-kit-role="labelled-fact"><dt data-kit-region="name">Due</dt><dd data-kit-region="value">14 days after it is sent</dd></dl>
        </div>
      </div>
      <div data-kit-role="action-group" data-kit-region="submit-return"><button type="button" data-kit-role="primary-action"><span data-kit-region="label">Send invoice</span></button><p data-kit-role="status-line" role="status" aria-live="polite"></p></div>
    </form>
    <form data-kit-layout="form" id="layout-form-web-address"data-kit-keep="aisha-khan/halls/layout-form-web-address" data-kit-keep-version="1">
      <div data-kit-region="notices" aria-live="polite"></div>
      <section data-kit-region="task-context"><h2>Add a hall</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="wide"><label for="layout-form-web-address-name">Name</label><input id="layout-form-web-address-name" name="name" value="Oakmere Dance Academy" /><output for="layout-form-web-address-name">Oakmere Dance Academy</output></div>
        <dl data-kit-role="labelled-fact" data-kit-holds="edit">
          <dt data-kit-region="name">Web address</dt>
          <dd data-kit-region="value"><code><span>venues.example.com/</span><span>oakmere-</span><span>dance-</span><span>academy</span></code><button type="button" data-kit-role="icon-action" data-kit-region="edit" aria-label="Change web address"><svg data-kit-icon="pencil" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M227.31,73.37,182.63,28.68a16,16,0,0,0-22.63,0L36.69,152A15.86,15.86,0,0,0,32,163.31V208a16,16,0,0,0,16,16H92.69A15.86,15.86,0,0,0,104,219.31L227.31,96a16,16,0,0,0,0-22.63ZM51.31,160,136,75.31,152.69,92,68,176.68ZM48,179.31,76.69,208H48Zm48,25.38L79.31,188,164,103.31,180.69,120Zm96-96L147.31,64l24-24L216,84.68Z"/></svg></button></dd>
          <dd data-kit-region="edit-form" id="layout-form-web-address-address" hidden>
            <div data-kit-role="form-group" data-kit-width="wide" data-kit-holds="help"><label for="layout-form-web-address-address-control">Web address</label><input id="layout-form-web-address-address-control" name="address" value="oakmere-dance-academy" aria-describedby="layout-form-web-address-address-help" /><output for="layout-form-web-address-address-control">oakmere-dance-academy</output><span data-kit-region="help" id="layout-form-web-address-address-help">Comes after venues.example.com/. Use letters, numbers and hyphens.</span></div>
            <div data-kit-role="action-group"><button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Save</span></button><button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Cancel</span></button></div>
          </dd>
        </dl>
      </div>
      <div data-kit-role="action-group" data-kit-region="submit-return"><button type="button" data-kit-role="primary-action"><span data-kit-region="label">Add the hall</span></button><p data-kit-role="status-line" role="status" aria-live="polite"></p></div>
    </form>
    <form data-kit-layout="form" id="layout-form-web-address-editing" data-kit-keep="aisha-khan/halls/layout-form-web-address-editing" data-kit-keep-version="1">
      <div data-kit-region="notices" aria-live="polite"></div>
      <section data-kit-region="task-context"><h2>Add a hall</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="wide"><label for="layout-form-web-address-editing-name">Name</label><input id="layout-form-web-address-editing-name" name="name" value="Oakmere Dance Academy" /><output for="layout-form-web-address-editing-name">Oakmere Dance Academy</output></div>
        <dl data-kit-role="labelled-fact" data-kit-holds="edit">
          <dt data-kit-region="name">Web address</dt>
          <dd data-kit-region="value"><code><span>venues.example.com/</span><span>oakmere-</span><span>dance-</span><span>academy</span></code><button type="button" data-kit-role="icon-action" data-kit-region="edit" aria-label="Change web address"><svg data-kit-icon="pencil" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M227.31,73.37,182.63,28.68a16,16,0,0,0-22.63,0L36.69,152A15.86,15.86,0,0,0,32,163.31V208a16,16,0,0,0,16,16H92.69A15.86,15.86,0,0,0,104,219.31L227.31,96a16,16,0,0,0,0-22.63ZM51.31,160,136,75.31,152.69,92,68,176.68ZM48,179.31,76.69,208H48Zm48,25.38L79.31,188,164,103.31,180.69,120Zm96-96L147.31,64l24-24L216,84.68Z"/></svg></button></dd>
          <dd data-kit-region="edit-form" id="layout-form-web-address-editing-address">
            <div data-kit-role="form-group" data-kit-width="wide" data-kit-holds="help"><label for="layout-form-web-address-editing-address-control">Web address</label><input id="layout-form-web-address-editing-address-control" name="address" value="oakmere-dance" aria-describedby="layout-form-web-address-editing-address-help" /><output for="layout-form-web-address-editing-address-control">oakmere-dance</output><span data-kit-region="help" id="layout-form-web-address-editing-address-help">Comes after venues.example.com/. Use letters, numbers and hyphens.</span></div>
            <div data-kit-role="action-group"><button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Save</span></button><button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Cancel</span></button></div>
          </dd>
        </dl>
      </div>
      <div data-kit-role="action-group" data-kit-region="submit-return"><button type="button" data-kit-role="primary-action"><span data-kit-region="label">Add the hall</span></button><p data-kit-role="status-line" data-kit-state="unsaved" role="status" aria-live="polite">Not saved</p></div>
    </form>
    <form data-kit-layout="form" id="layout-form-empty-region">
      <div data-kit-region="notices" aria-live="polite"></div>
      <section data-kit-region="task-context"><h2>Close Oakmere Hall on <time datetime="2025-04-25">25 April 2025</time></h2></section>
      <div data-kit-region="form-groups"><div data-kit-region="notices" aria-live="polite"></div></div>
      <div data-kit-role="action-group" data-kit-region="submit-return"><button type="button" data-kit-role="primary-action"><span data-kit-region="label">Close the hall</span></button><p data-kit-role="status-line" role="status" aria-live="polite"></p></div>
    </form>
    <form data-kit-layout="form" id="layout-form-group-set">
      <div data-kit-region="notices" aria-live="polite"></div>
      <section data-kit-region="task-context"><h2>Add items</h2></section>
      <div data-kit-region="form-groups">
        <div data-kit-region="notices" aria-live="polite"></div>
        <fieldset data-kit-region="form-group-set" data-kit-state="error" id="form-sizes-set" aria-describedby="form-sizes-set-help form-sizes-set-error" aria-invalid="true">
          <legend>How many of each size</legend>
          <div data-kit-role="form-group" id="form-sizes-small">
            <label for="form-sizes-small-control" id="form-sizes-small-label">Small</label>
            <div data-kit-role="number-field" data-kit-width="short" id="form-sizes-small-control-number-field" data-kit-number='{"fraction":false,"locale":"en-GB"}'><input id="form-sizes-small-control" type="text" inputmode="numeric" value="0" autocomplete="off" autocorrect="off" spellcheck="false" /><input type="hidden" name="small" value="0" /></div>
            <output for="form-sizes-small-control">0</output>
          </div>
          <div data-kit-role="form-group" id="form-sizes-medium">
            <label for="form-sizes-medium-control" id="form-sizes-medium-label">Medium</label>
            <div data-kit-role="number-field" data-kit-width="short" id="form-sizes-medium-control-number-field" data-kit-number='{"fraction":false,"locale":"en-GB"}'><input id="form-sizes-medium-control" type="text" inputmode="numeric" value="0" autocomplete="off" autocorrect="off" spellcheck="false" /><input type="hidden" name="medium" value="0" /></div>
            <output for="form-sizes-medium-control">0</output>
          </div>
          <div data-kit-role="form-group" id="form-sizes-large">
            <label for="form-sizes-large-control" id="form-sizes-large-label">Large</label>
            <div data-kit-role="number-field" data-kit-width="short" id="form-sizes-large-control-number-field" data-kit-number='{"fraction":false,"locale":"en-GB"}'><input id="form-sizes-large-control" type="text" inputmode="numeric" value="0" autocomplete="off" autocorrect="off" spellcheck="false" /><input type="hidden" name="large" value="0" /></div>
            <output for="form-sizes-large-control">0</output>
          </div>
          <div data-kit-role="form-group" id="form-sizes-extra-large">
            <label for="form-sizes-extra-large-control" id="form-sizes-extra-large-label">Extra large</label>
            <div data-kit-role="number-field" data-kit-width="short" id="form-sizes-extra-large-control-number-field" data-kit-number='{"fraction":false,"locale":"en-GB"}'><input id="form-sizes-extra-large-control" type="text" inputmode="numeric" value="0" autocomplete="off" autocorrect="off" spellcheck="false" /><input type="hidden" name="extra-large" value="0" /></div>
            <output for="form-sizes-extra-large-control">0</output>
          </div>
          <span data-kit-region="help" id="form-sizes-set-help">Use 0 for a size you are not adding.</span>
          <span data-kit-region="error" id="form-sizes-set-error">Enter at least one item across the sizes.</span>
        </fieldset>
      </div>
      <div data-kit-role="action-group" data-kit-region="submit-return"><button type="button" data-kit-role="primary-action"><span data-kit-region="label">Add items</span></button><p data-kit-role="status-line" role="status" aria-live="polite"></p></div>
    </form>
  </main>
</div>

<form data-kit-layout="form" data-kit-density="desk">
  <div data-kit-region="notices" aria-live="polite"></div>
  <div data-kit-role="identity"><span data-kit-mark aria-hidden="true">k</span><span data-kit-wordmark>kit</span></div>
  <header data-kit-region="header">
    <div><h1 data-kit-region="subject">Sign up</h1><p data-kit-region="lede"><span>CSS core</span><span>Layout example</span></p></div>
    <div data-kit-region="actions"><a href="../../layout-form/#layout-form-standing-alone">CSS core</a><div data-kit-region="routes"><a href="../../calendar/">Open booking diary</a></div></div>
  </header>
  <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="signup-name">Name</label><input id="signup-name" name="name" autocomplete="name" /><output for="signup-name">No name given</output></div>
    <div data-kit-role="form-group"><label for="signup-email">Email</label><input id="signup-email" name="email" type="email" autocomplete="email" /><output for="signup-email">No email given</output></div>
  </div>
  <div data-kit-role="action-group" data-kit-region="submit-return"><button type="button" data-kit-role="primary-action"><span data-kit-region="label">Create account</span></button><a href="../../site/opening/" data-kit-role="way-back"><span data-kit-region="label">Return to kit</span></a><p data-kit-role="status-line" role="status" aria-live="polite"></p><p data-kit-role="status-line" role="status" aria-live="polite">Your details stay on this page.</p></div>
</form>

<form data-kit-layout="form" data-kit-density="desk">
  <div data-kit-region="notices" aria-live="polite"></div>
  <div data-kit-role="identity"><span data-kit-region="tenant">Oakmere Village Hall</span><span data-kit-wordmark>kit</span></div>
  <header data-kit-region="header">
    <div><h1 data-kit-region="subject">Sign up</h1><p data-kit-region="lede"><span>CSS core</span><span>Layout example</span></p></div>
    <div data-kit-region="actions"><a href="../../../layout-form/#layout-form-standing-alone-leading-tenant">CSS core</a><div data-kit-region="routes"><a href="../../../calendar/">Open booking diary</a></div></div>
  </header>
  <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="signup-name">Name</label><input id="signup-name" name="name" autocomplete="name" /><output for="signup-name">No name given</output></div>
    <div data-kit-role="form-group"><label for="signup-email">Email</label><input id="signup-email" name="email" type="email" autocomplete="email" /><output for="signup-email">No email given</output></div>
  </div>
  <div data-kit-role="action-group" data-kit-region="submit-return"><button type="button" data-kit-role="primary-action"><span data-kit-region="label">Create account</span></button><a href="../../../site/opening/" data-kit-role="way-back"><span data-kit-region="label">Return to kit</span></a><p data-kit-role="status-line" role="status" aria-live="polite"></p><p data-kit-role="status-line" role="status" aria-live="polite">Your details stay on this page.</p></div>
  <footer data-kit-region="service-destinations"><a href="?service=terms">Service terms</a><span aria-hidden="true"> ·&nbsp;</span><a href="?service=status">Service status</a></footer>
</form>

<form data-kit-layout="form" data-kit-density="desk">
  <div data-kit-region="notices" aria-live="polite"></div>
  <div data-kit-role="identity"><span data-kit-mark aria-hidden="true">k</span><span data-kit-wordmark>kit</span><span data-kit-region="tenant">Oakmere Village Hall</span></div>
  <header data-kit-region="header">
    <div><h1 data-kit-region="subject">Sign up</h1><p data-kit-region="lede"><span>CSS core</span><span>Layout example</span></p></div>
    <div data-kit-region="actions"><a href="../../../layout-form/#layout-form-standing-alone-following-tenant">CSS core</a><div data-kit-region="routes"><a href="../../../calendar/">Open booking diary</a></div></div>
  </header>
  <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="signup-name">Name</label><input id="signup-name" name="name" autocomplete="name" /><output for="signup-name">No name given</output></div>
    <div data-kit-role="form-group"><label for="signup-email">Email</label><input id="signup-email" name="email" type="email" autocomplete="email" /><output for="signup-email">No email given</output></div>
  </div>
  <div data-kit-role="action-group" data-kit-region="submit-return"><button type="button" data-kit-role="primary-action"><span data-kit-region="label">Create account</span></button><a href="../../../site/opening/" data-kit-role="way-back"><span data-kit-region="label">Return to kit</span></a><p data-kit-role="status-line" role="status" aria-live="polite"></p><p data-kit-role="status-line" role="status" aria-live="polite">Your details stay on this page.</p></div>
</form>

<div data-kit-layout="shell" data-kit-density="desk">
  <a data-kit-region="skip-link" href="#kit-shell-subject">Skip to content</a>
  <div data-kit-region="identity-strip"><div data-kit-role="identity"><span data-kit-mark aria-hidden="true">k</span><span data-kit-wordmark>kit</span></div></div>
  <header data-kit-region="header">
    <div><h1 data-kit-region="subject" id="kit-shell-subject" tabindex="-1">Add a contact for Oakmere Primary School</h1><p data-kit-region="lede"><span>CSS core</span><span>Layout example</span></p></div>
    <div data-kit-region="actions"><a href="../../layout-form/#layout-form-no-task-context">CSS core</a></div>
  </header>
  <main data-kit-region="body">
    <form data-kit-layout="form">
      <div data-kit-region="notices" aria-live="polite"></div>
      <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="contact-name">Name</label><input id="contact-name" name="name" /><output for="contact-name">No name given</output></div>
        <div data-kit-role="form-group"><label for="contact-phone">Phone</label><input id="contact-phone" name="phone" type="tel" /><output for="contact-phone">No phone number given</output></div>
      </div>
      <div data-kit-role="action-group" data-kit-region="submit-return"><button type="button" data-kit-role="primary-action"><span data-kit-region="label">Save contact</span></button><a href="../../record/" 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>
  </main>
</div>

<div data-kit-layout="shell" data-kit-density="desk">
  <a data-kit-region="skip-link" href="#kit-shell-subject">Skip to content</a>
  <div data-kit-region="identity-strip"><div data-kit-role="identity"><span data-kit-mark aria-hidden="true">k</span><span data-kit-wordmark>kit</span></div></div>
  <header data-kit-region="header">
    <div><h1 data-kit-region="subject" id="kit-shell-subject" tabindex="-1">Review a refund for the Oakmere Primary School invoice</h1><p data-kit-region="lede"><span>CSS core</span><span>Layout example</span></p></div>
    <div data-kit-region="actions"><a href="../../layout-form/#layout-form-refused-undo">CSS core</a></div>
  </header>
  <main data-kit-region="body">
    <form data-kit-layout="form">
      <div data-kit-region="notices" aria-live="polite"></div>
      <div data-kit-role="refusal" id="form-undo-refused-1" role="alert" aria-atomic="true">
        <p data-kit-region="line">Undo is refused: the invoice was paid after you removed the late fee.</p>
      </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><dl data-kit-role="labelled-fact"><dt data-kit-region="name">Paid</dt><dd data-kit-region="value" data-kit-role="amount">£120.00</dd><dd data-kit-region="supporting">In full</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" data-kit-holds="help"><label for="refund-amount">Amount (GBP)</label><input id="refund-amount" name="amount" inputmode="decimal" value="120.00" aria-describedby="refund-amount-help" /><output for="refund-amount">120.00</output><span data-kit-region="help" id="refund-amount-help">Up to the £120.00 paid on this invoice.</span></div>
        <div data-kit-role="form-group" data-kit-width="medium"><label for="refund-reason">Reason</label><input id="refund-reason" name="reason" value="Returned materials" /><output for="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 £120.00 to the original payment method.</p>
        <p data-kit-region="effective-time">The refund is submitted as soon as you confirm.</p>
        <p data-kit-region="correction-path">A submitted refund cannot be cancelled. Review the amount and reason before confirming, or <a href="../../record/">return to the invoice</a>.</p>
      </section>
      <div data-kit-role="action-group" data-kit-region="submit-return"><button type="button" data-kit-role="primary-action"><span data-kit-region="label">Issue refund</span></button><a href="../../record/" 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>
  </main>
</div>

<div data-kit-layout="shell" data-kit-density="desk">
  <a data-kit-region="skip-link" href="#kit-shell-subject">Skip to content</a>
  <div data-kit-region="identity-strip"><div data-kit-role="identity"><span data-kit-mark aria-hidden="true">k</span><span data-kit-wordmark>kit</span></div></div>
  <header data-kit-region="header">
    <div><h1 data-kit-region="subject" id="kit-shell-subject" tabindex="-1">Review a refund for the Oakmere Primary School invoice</h1><p data-kit-region="lede"><span>CSS core</span><span>Layout example</span></p></div>
    <div data-kit-region="actions"><a href="../../layout-form/#layout-form-unsaved">CSS core</a></div>
  </header>
  <main data-kit-region="body">
    <form data-kit-layout="form" id="form-unsaved-refund" data-kit-keep="aisha-khan/refund/OH-INV-003" data-kit-keep-version="4">
      <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><dl data-kit-role="labelled-fact"><dt data-kit-region="name">Paid</dt><dd data-kit-region="value" data-kit-role="amount">£120.00</dd><dd data-kit-region="supporting">In full</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" data-kit-holds="help"><label for="unsaved-refund-amount">Amount (GBP)</label><input id="unsaved-refund-amount" name="amount" inputmode="decimal" value="80.00" aria-describedby="unsaved-refund-amount-help" /><output for="unsaved-refund-amount">80.00</output><span data-kit-region="help" id="unsaved-refund-amount-help">Up to the £120.00 paid on this invoice.</span></div>
        <div data-kit-role="form-group" data-kit-width="wide"><label for="unsaved-refund-reason">Reason</label><input id="unsaved-refund-reason" name="reason" value="Returned materials" /><output for="unsaved-refund-reason">Returned materials</output></div>
        <dl data-kit-role="labelled-fact" data-kit-holds="edit"><dt data-kit-region="name">Send the receipt to</dt><dd data-kit-region="value"><span data-kit-region="email"><span><span>office@</span><wbr /><span>oakmereprimary.org</span></span></span><button type="button" data-kit-role="icon-action" data-kit-region="edit" aria-label="Change where the receipt goes"><svg data-kit-icon="pencil" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M227.31,73.37,182.63,28.68a16,16,0,0,0-22.63,0L36.69,152A15.86,15.86,0,0,0,32,163.31V208a16,16,0,0,0,16,16H92.69A15.86,15.86,0,0,0,104,219.31L227.31,96a16,16,0,0,0,0-22.63ZM51.31,160,136,75.31,152.69,92,68,176.68ZM48,179.31,76.69,208H48Zm48,25.38L79.31,188,164,103.31,180.69,120Zm96-96L147.31,64l24-24L216,84.68Z"></path></svg></button></dd><dd data-kit-region="edit-form" id="unsaved-refund-contact-edit"><div data-kit-role="form-group" data-kit-width="wide"><label for="unsaved-refund-contact">Send the receipt to</label><input id="unsaved-refund-contact" name="contact" type="email" value="bursar@oakmereprimary.org" /><output for="unsaved-refund-contact">bursar@oakmereprimary.org</output></div><div data-kit-role="action-group"><button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Save</span></button><button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Cancel</span></button></div></dd></dl>
        <div data-kit-role="form-group" data-kit-holds="help"><label for="unsaved-refund-note">Note for the hirer</label><textarea id="unsaved-refund-note" name="note" rows="6" aria-describedby="unsaved-refund-note-help">The school returned the unused chairs and one projector on Friday. Refund the hire of those items only; the hall hire stands.</textarea><output for="unsaved-refund-note">The school returned the unused chairs and one projector on Friday. Refund the hire of those items only; the hall hire stands.</output><span data-kit-region="help" id="unsaved-refund-note-help">The hirer sees this note on the receipt.</span></div>
        <div data-kit-role="form-group"><label for="unsaved-refund-internal">Note for the team</label><textarea id="unsaved-refund-internal" name="internal" rows="6">Checked the returns log with the caretaker.</textarea><output for="unsaved-refund-internal">Checked the returns log with the caretaker.</output></div>
      </div>
      <div data-kit-role="action-group" data-kit-region="submit-return"><div data-kit-role="refusal" id="form-unsaved-refused" role="alert" aria-atomic="true"><p data-kit-region="line">Refund not issued: the payment provider is not answering. Your entry is kept on this device.</p></div><button type="button" data-kit-role="primary-action"><span data-kit-region="label">Issue refund</span></button><a href="../../record/" data-kit-role="way-back"><span data-kit-region="label">Return to invoice</span></a><p data-kit-role="status-line" data-kit-state="unsaved" role="status" aria-live="polite">Not saved</p></div>
    </form>
  </main>
</div>

<div data-kit-layout="shell" data-kit-density="desk">
  <a data-kit-region="skip-link" href="#kit-shell-subject">Skip to content</a>
  <div data-kit-region="identity-strip"><div data-kit-role="identity"><span data-kit-mark aria-hidden="true">k</span><span data-kit-wordmark>kit</span></div></div>
  <header data-kit-region="header">
    <div><h1 data-kit-region="subject" id="kit-shell-subject" tabindex="-1">Form</h1><p data-kit-region="lede"><span>CSS core</span><span>Layout example</span></p></div>
    <div data-kit-region="actions"><a href="../../layout-form/#layout-form-inert">CSS core</a></div>
  </header>
  <main data-kit-region="body">
    <form data-kit-layout="form">
      <div data-kit-region="notices" aria-live="polite"></div>
      <section data-kit-region="task-context"><h2>Counts</h2></section>
      <div data-kit-region="form-groups">
        <div data-kit-region="notices" aria-live="polite"></div>
        <div data-kit-region="form-row-list" style="--kit-form-row-columns: 2;">
          <div data-kit-region="form-row">
            <div data-kit-role="form-group" data-kit-width="narrow"><label for="inert-row-count">Count</label><input id="inert-row-count" name="count" value="1" /><output for="inert-row-count">1</output></div>
            <div data-kit-role="form-group" data-kit-width="narrow"><label for="inert-row-amount">Amount</label><input id="inert-row-amount" name="amount" value="20" /><output for="inert-row-amount">20</output></div>
            <label><input type="hidden" name="and-more" value="false" /><input data-kit-role="selection-control" type="checkbox" id="inert-row-mark" name="and-more" /><span>This count and more</span><output>Not marked</output></label>
            <button type="button" data-kit-role="secondary-action" aria-label="Remove row 1" id="inert-row-remove" data-kit-state="inert" disabled aria-describedby="inert-row-remove-words"><span data-kit-region="label">Remove</span></button>
            <p data-kit-region="words" id="inert-row-remove-words">Save this count before removing it.</p>
          </div>
          <button type="button" data-kit-role="secondary-action" id="inert-row-add" data-kit-state="inert" disabled aria-describedby="inert-row-add-words"><span data-kit-region="label">Add a count</span></button>
          <p data-kit-region="words" id="inert-row-add-words">Save these counts before adding another.</p>
        </div>
      </div>
      <div data-kit-role="action-group" data-kit-region="submit-return"><button type="button" data-kit-role="primary-action"><span data-kit-region="label">Save</span></button><p data-kit-role="status-line" role="status" aria-live="polite"></p></div>
    </form>
    <form data-kit-layout="form">
      <div data-kit-region="notices" aria-live="polite"></div>
      <section data-kit-region="task-context"><h2>Hall contacts</h2></section>
      <div data-kit-region="form-groups">
        <div data-kit-region="notices" aria-live="polite"></div>
        <div data-kit-region="form-part-list">
          <div data-kit-role="headed-region" data-kit-holds="subtle-action">
            <h3 data-kit-region="heading">Contact 1</h3>
            <button type="button" data-kit-role="subtle-action" aria-label="Remove contact 1"><span data-kit-region="label">Remove</span></button>
            <div data-kit-region="content">
              <div data-kit-role="form-group" data-kit-width="medium"><label for="inert-contact-name">Name</label><input id="inert-contact-name" name="name" value="Grace Adeyemi" /><output for="inert-contact-name">Grace Adeyemi</output></div>
            </div>
          </div>
          <button type="button" data-kit-role="secondary-action" id="inert-part-add" data-kit-state="inert" disabled aria-describedby="inert-part-add-words"><span data-kit-region="label">Add another contact</span></button>
          <p data-kit-region="words" id="inert-part-add-words">Save these contacts before adding another.</p>
        </div>
      </div>
      <div data-kit-role="action-group" data-kit-region="submit-return"><button type="button" data-kit-role="primary-action"><span data-kit-region="label">Save contacts</span></button><p data-kit-role="status-line" role="status" aria-live="polite"></p></div>
    </form>
  </main>
</div>