kit

Fact group

Built revision v17.10.0

CSS core
Topics

Human support

Bring a missing role, layout, or state, or a rendering against the standard, to the session working on kit. Name the package and the entry.

On Shell, Home, List, Record, Form, Stepped flow, Settings, Reports, Issued document

Fact group

A long date and time and a date range stay within four facts.

Starts
Dates
People
24
Standing
Draft

A lone fact stands in its group.

Amount due
£240.00

Amount and Stamp values pair at Phone; a value wider than its half takes its own line.

Standing
Awaiting the hirer’s countersignature
Deposit held
£50.00
Amount due
£240.00

A plain-text value keeps one fact to a line at Phone, with a form following.

Hirer
Oakmere Primary School
Amount due
£240.00
Standing
Draft
Oakmere Village Hall

A Fact group stands before Record rows.

Invoice
OH-INV-003
Amount due
£84.00
Bookings on this invoice
BookingAmount
£48.00
£36.00

A Fact group stands before a List.

Series
Choir rehearsal, weekly
Occurrences
2
Occurrences in this series
OccurrenceAmount
£30.00
£30.00

A choice keeps Form groups before its action.

Deposit, part kept

What happens to the deposit?
25
Two chairs were damaged.

A choice has no Form group before its action.

Deposit, released

What happens to the deposit?

Source
<p class="specimen-case-line">A long date and time and a date range stay within four facts.</p>
<div data-kit-role="fact-group">
  <dl data-kit-role="labelled-fact"><dt data-kit-region="name">Starts</dt><dd data-kit-region="value"><time datetime="2026-09-28T01:35+01:00"><span>28 September 2026</span><wbr><span> at 01:35</span></time></dd></dl>
  <dl data-kit-role="labelled-fact"><dt data-kit-region="name">Dates</dt><dd data-kit-region="value"><time datetime="2026-09-28/2027-10-28"><span>28 September 2026 – </span><wbr><span>28 October 2027</span></time></dd></dl>
  <dl data-kit-role="labelled-fact"><dt data-kit-region="name">People</dt><dd data-kit-region="value" data-kit-role="amount">24</dd></dl>
  <dl data-kit-role="labelled-fact"><dt data-kit-region="name">Standing</dt><dd data-kit-region="value" data-kit-role="stamp" data-kit-state="neutral">Draft</dd></dl>
</div>
<p class="specimen-case-line">A lone fact stands in its group.</p>
<div data-kit-role="fact-group">
  <dl data-kit-role="labelled-fact"><dt data-kit-region="name">Amount due</dt><dd data-kit-region="value" data-kit-role="amount">£240.00</dd></dl>
</div>
<p class="specimen-case-line">Amount and Stamp values pair at Phone; a value wider than its half takes its own line.</p>
<div data-kit-role="fact-group">
  <dl data-kit-role="labelled-fact"><dt data-kit-region="name">Standing</dt><dd data-kit-region="value" data-kit-role="stamp" data-kit-state="attention">Awaiting the hirer’s countersignature</dd></dl>
  <dl data-kit-role="labelled-fact"><dt data-kit-region="name">Deposit held</dt><dd data-kit-region="value" data-kit-role="amount">£50.00</dd></dl>
  <dl data-kit-role="labelled-fact"><dt data-kit-region="name">Amount due</dt><dd data-kit-region="value" data-kit-role="amount">£240.00</dd></dl>
</div>
<p class="specimen-case-line">A plain-text value keeps one fact to a line at Phone, with a form following.</p>
<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">Amount due</dt><dd data-kit-region="value" data-kit-role="amount">£240.00</dd></dl>
  <dl data-kit-role="labelled-fact"><dt data-kit-region="name">Standing</dt><dd data-kit-region="value" data-kit-role="stamp" data-kit-state="neutral">Draft</dd></dl>
</div>
<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="fact-group-text">Text</label>
    <input id="fact-group-text" name="text" type="text" value="Oakmere Village Hall">
    <output for="fact-group-text">Oakmere Village Hall</output>
  </div>
  </div>
  <div data-kit-role="action-group" data-kit-region="submit-return"><button type="submit" data-kit-role="primary-action"><span data-kit-region="label">Issue refund</span></button><p data-kit-role="status-line" role="status" aria-live="polite"></p></div>
</form>
<p class="specimen-case-line">A Fact group stands before Record rows.</p>
<div data-kit-role="fact-group">
  <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">Amount due</dt><dd data-kit-region="value" data-kit-role="amount">£84.00</dd></dl>
</div>
<div data-kit-region="rows">
  <div data-kit-region="table" tabindex="0">
  <table data-kit-table="comparison">
    <caption>Bookings on this invoice</caption>
    <thead data-kit-region="column-headings"><tr><th scope="col">Booking</th><th scope="col" data-kit-column="amount">Amount</th></tr></thead>
    <tbody>
      <tr><th scope="row"><article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../../record/">Main Hall, <time datetime="2025-04-04">4 April 2025</time></a></div></div></div></div></article></th><td data-kit-column="amount"><div data-kit-region="fact" data-kit-role="amount">£48.00</div></td></tr>
      <tr><th scope="row"><article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../../record/">Meeting Room, <time datetime="2025-04-11">11 April 2025</time></a></div></div></div></div></article></th><td data-kit-column="amount"><div data-kit-region="fact" data-kit-role="amount">£36.00</div></td></tr>
    </tbody>
  </table>
  </div>
</div>
<p class="specimen-case-line">A Fact group stands before a List.</p>
<div data-kit-role="fact-group">
  <dl data-kit-role="labelled-fact"><dt data-kit-region="name">Series</dt><dd data-kit-region="value">Choir rehearsal, weekly</dd></dl>
  <dl data-kit-role="labelled-fact"><dt data-kit-region="name">Occurrences</dt><dd data-kit-region="value" data-kit-role="amount">2</dd></dl>
</div>
<div data-kit-layout="list">
  <div data-kit-region="notices" aria-live="polite"></div>
  <section data-kit-region="rows" aria-label="Occurrences">
    <div data-kit-region="notices" aria-live="polite"></div>
    <div data-kit-region="table" tabindex="0">
    <table data-kit-table="comparison">
      <caption>Occurrences in this series</caption>
      <thead data-kit-region="column-headings"><tr><th scope="col">Occurrence</th><th scope="col" data-kit-column="amount">Amount</th></tr></thead>
      <tbody>
        <tr><th scope="row"><article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../../record/"><time datetime="2025-04-17">17 April 2025</time></a></div></div></div></div></article></th><td data-kit-column="amount"><div data-kit-region="fact" data-kit-role="amount">£30.00</div></td></tr>
        <tr><th scope="row"><article data-kit-role="row"><div data-kit-region="content-column"><div data-kit-region="subject-column"><div data-kit-region="line"><div data-kit-region="subject-stamp"><a data-kit-region="subject" href="../../record/"><time datetime="2025-04-24">24 April 2025</time></a></div></div></div></div></article></th><td data-kit-column="amount"><div data-kit-region="fact" data-kit-role="amount">£30.00</div></td></tr>
      </tbody>
    </table>
    </div>
  </section>
</div>
<p class="specimen-case-line">A choice keeps Form groups before its action.</p>
<form data-kit-role="label-panel" aria-label="Deposit, part kept">
  <h3>Deposit, part kept</h3>
  <fieldset data-kit-role="selection-control" data-kit-region="group" id="fact-group-deposit">
    <legend>What happens to the deposit?</legend>
    <label><input data-kit-role="selection-control" type="radio" name="fact-group-deposit" value="release" /><span>Release it in full</span><output>Not chosen</output></label>
    <label><input data-kit-role="selection-control" type="radio" name="fact-group-deposit" value="part" checked /><span>Keep part of it</span><output>Chosen</output></label>
    <label><input data-kit-role="selection-control" type="radio" name="fact-group-deposit" value="keep" /><span>Keep all of it</span><output>Not chosen</output></label>
  </fieldset>
  <div data-kit-role="form-group" data-kit-width="narrow">
    <label for="fact-group-kept-amount">Amount kept</label>
    <input id="fact-group-kept-amount" name="kept-amount" type="text" inputmode="decimal" value="25">
    <output for="fact-group-kept-amount">25</output>
  </div>
  <div data-kit-role="form-group">
    <label for="fact-group-kept-reason">Reason</label>
    <textarea id="fact-group-kept-reason" name="reason">Two chairs were damaged.</textarea>
    <output for="fact-group-kept-reason">Two chairs were damaged.</output>
  </div>
  <div data-kit-role="action-group">
    <button type="submit" data-kit-role="primary-action"><span data-kit-region="label">Settle the deposit</span></button>
  </div>
  <p data-kit-role="status-line" role="status" aria-live="polite"></p>
</form>
<p class="specimen-case-line">A choice has no Form group before its action.</p>
<form data-kit-role="label-panel" aria-label="Deposit, released">
  <h3>Deposit, released</h3>
  <fieldset data-kit-role="selection-control" data-kit-region="group" id="fact-group-released">
    <legend>What happens to the deposit?</legend>
    <label><input data-kit-role="selection-control" type="radio" name="fact-group-released" value="release" checked /><span>Release it in full</span><output>Chosen</output></label>
    <label><input data-kit-role="selection-control" type="radio" name="fact-group-released" value="part" /><span>Keep part of it</span><output>Not chosen</output></label>
    <label><input data-kit-role="selection-control" type="radio" name="fact-group-released" value="keep" /><span>Keep all of it</span><output>Not chosen</output></label>
  </fieldset>
  <div data-kit-role="action-group">
    <button type="submit" data-kit-role="primary-action"><span data-kit-region="label">Settle the deposit</span></button>
  </div>
  <p data-kit-role="status-line" role="status" aria-live="polite"></p>
</form>