On Shell, Home, List, Record, Form, Stepped flow, Settings, Find, Reports, Calendar
Form group
Room selection while bookings cannot be changed.
Accepts CSV and TSV files.
- bookings-2025.csv Uploaded
- hirers.xlsx Refused Excel files cannot be added.
Camera not available. Type the reference.
35 of 160 characters
The caretaker reads this note when the booking starts.
Sends as 1 message
A field that may be left empty, empty and filled, beside a required field.
A search holding text, with Clear.
A search for booking references, with Clear and Scan.
A field that takes a paste of several lines.
The form owns the submit action.
A password that cannot be changed, with Show disabled.
A booking reference that cannot be changed, with Scan disabled.
A file that cannot be changed, with its selector disabled.
Files cannot be changed. Accepts CSV and TSV files.
Files that cannot be changed, with their selector and Remove disabled.
- bookings-2025.csv Uploaded
A search that cannot be changed, with Clear disabled.
A note that can mention people and jobs.
Ask @Daniel Okafor about the boiler.
- Dana Reyesdana@
oakmerebuilders .co.uk - Adam Priceadam@
oakmerebuilders .co.uk - Daniel Okafordaniel@
okaforplumbing .co.ukNo access - Davies kitchen refitJOB-2214
Daniel Okafor will not be told.
A note that cannot be changed.
Ask @Dana Reyes for the gate code.
A description that takes headings, lists, checklists, quotes, code, mentions, dates and files.
Kitchen refit
Start on once @Dana Reyes has the keys. Keep the boiler off, ventilate the room and read the survey. The lockbox code is 4471.
Floor plan: kitchen-plan.pdf
Strip the units
Move the sink
Isolate the water
Cap the pipes
- Done
Order the worktop
- Not done
Book the electrician
Leave the side gate unlocked.
Gate code: 4471Source
<div data-kit-role="form-group" data-kit-width="medium" id="form-text">
<label for="form-text-control">Text</label>
<input id="form-text-control" name="text" type="text" value="Oakmere Village Hall">
<output for="form-text-control">Oakmere Village Hall</output>
</div>
<div data-kit-role="form-group" data-kit-width="narrow" id="form-number-group">
<label for="form-number">Number</label>
<input id="form-number" name="number" type="text" inputmode="numeric" value="12">
<output for="form-number">12</output>
</div>
<div data-kit-role="form-group">
<label for="form-email">Email</label>
<input id="form-email" name="email" type="email" value="aisha@oakmereprimary.org">
<output for="form-email">aisha@oakmereprimary.org</output>
</div>
<div data-kit-role="form-group">
<label for="form-telephone">Telephone</label>
<input id="form-telephone" name="telephone" type="tel" value="01632 960 123">
<output for="form-telephone">01632 960 123</output>
</div>
<div data-kit-role="form-group" id="form-date">
<label for="form-date-control" id="form-date-label">Date</label>
<div data-kit-role="date-field" id="form-date-control-date-field" data-kit-dates='{"direction":"either","firstDay":"mon","locale":"en-GB","quarters":{"names":[["1st quarter","Q1"],["2nd quarter","Q2"],["3rd quarter","Q3"],["4th quarter","Q4"]],"words":[]},"today":"2025-02-10"}'>
<input id="form-date-control" type="text" autocomplete="off" value="Saturday, 15 February 2025" aria-describedby="form-date-control-resolved" aria-expanded="false" aria-controls="form-date-control-month"><span data-kit-region="widest-dates" aria-hidden="true">Wednesday, 22 January 2025
Thursday, 23 January 2025
Friday, 24 January 2025
Saturday, 25 January 2025
Sunday, 26 January 2025
Monday, 27 January 2025
Tuesday, 28 January 2025
Saturday, 22 February 2025
Sunday, 23 February 2025
Monday, 24 February 2025
Tuesday, 25 February 2025
Wednesday, 26 February 2025
Thursday, 27 February 2025
Friday, 28 February 2025
Saturday, 22 March 2025
Sunday, 23 March 2025
Monday, 24 March 2025
Tuesday, 25 March 2025
Wednesday, 26 March 2025
Thursday, 27 March 2025
Friday, 28 March 2025
Tuesday, 22 April 2025
Wednesday, 23 April 2025
Thursday, 24 April 2025
Friday, 25 April 2025
Saturday, 26 April 2025
Sunday, 27 April 2025
Monday, 28 April 2025
Thursday, 22 May 2025
Friday, 23 May 2025
Saturday, 24 May 2025
Sunday, 25 May 2025
Monday, 26 May 2025
Tuesday, 27 May 2025
Wednesday, 28 May 2025
Sunday, 22 June 2025
Monday, 23 June 2025
Tuesday, 24 June 2025
Wednesday, 25 June 2025
Thursday, 26 June 2025
Friday, 27 June 2025
Saturday, 28 June 2025
Tuesday, 22 July 2025
Wednesday, 23 July 2025
Thursday, 24 July 2025
Friday, 25 July 2025
Saturday, 26 July 2025
Sunday, 27 July 2025
Monday, 28 July 2025
Friday, 22 August 2025
Saturday, 23 August 2025
Sunday, 24 August 2025
Monday, 25 August 2025
Tuesday, 26 August 2025
Wednesday, 27 August 2025
Thursday, 28 August 2025
Monday, 22 September 2025
Tuesday, 23 September 2025
Wednesday, 24 September 2025
Thursday, 25 September 2025
Friday, 26 September 2025
Saturday, 27 September 2025
Sunday, 28 September 2025
Wednesday, 22 October 2025
Thursday, 23 October 2025
Friday, 24 October 2025
Saturday, 25 October 2025
Sunday, 26 October 2025
Monday, 27 October 2025
Tuesday, 28 October 2025
Saturday, 22 November 2025
Sunday, 23 November 2025
Monday, 24 November 2025
Tuesday, 25 November 2025
Wednesday, 26 November 2025
Thursday, 27 November 2025
Friday, 28 November 2025
Monday, 22 December 2025
Tuesday, 23 December 2025
Wednesday, 24 December 2025
Thursday, 25 December 2025
Friday, 26 December 2025
Saturday, 27 December 2025
Sunday, 28 December 2025</span>
<span id="form-date-control-resolved" data-kit-region="resolved" aria-live="polite"></span>
<button type="button" data-kit-role="icon-action" data-kit-region="calendar" id="form-date-control-calendar" aria-label="Calendar" aria-describedby="form-date-control"><svg data-kit-icon="calendar-blank" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M208,32H184V24a8,8,0,0,0-16,0v8H88V24a8,8,0,0,0-16,0v8H48A16,16,0,0,0,32,48V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V48A16,16,0,0,0,208,32ZM72,48v8a8,8,0,0,0,16,0V48h80v8a8,8,0,0,0,16,0V48h24V80H48V48ZM208,208H48V96H208V208Z"/></svg></button>
<input type="hidden" name="date" value="2025-02-15">
<div id="form-date-control-month" data-kit-role="popover" data-kit-region="month" popover="manual"></div>
</div>
<output for="form-date-control"><time datetime="2025-02-15">Saturday, 15 February 2025</time></output>
</div>
<div data-kit-role="form-group" id="form-time">
<label for="form-time-control" id="form-time-label">Time</label>
<div data-kit-role="time-field" id="form-time-control-time-field" data-kit-dates='{"locale":"en-GB","step":15,"zone":"Europe/London"}'>
<input id="form-time-control" type="text" autocomplete="off" value="10:00" aria-describedby="form-time-control-resolved" aria-expanded="false" aria-controls="form-time-control-times-list"><span data-kit-region="widest-times" aria-hidden="true">00:58
01:58
02:58
03:58
04:58
05:58
06:58
07:58
08:58
09:58
10:58
11:58
12:58
13:58
14:58
15:58
16:58
17:58
18:58
19:58
20:58
21:58
22:58
23:58</span>
<span id="form-time-control-resolved" data-kit-region="resolved" aria-live="polite"></span>
<button type="button" data-kit-role="icon-action" data-kit-region="times" id="form-time-control-times" aria-label="Times"><svg data-kit-icon="clock" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm64-88a8,8,0,0,1-8,8H128a8,8,0,0,1-8-8V72a8,8,0,0,1,16,0v48h48A8,8,0,0,1,192,128Z"/></svg></button>
<input type="hidden" name="time" value="10:00">
<div id="form-time-control-times-list" data-kit-role="popover" data-kit-region="times-list" popover="manual" role="listbox" aria-label="Times"></div>
</div>
<output for="form-time-control"><time datetime="10:00">10:00</time></output>
</div>
<div data-kit-role="form-group">
<label for="form-select">Select</label>
<div data-kit-region="select"><select id="form-select" name="select"><option>All rooms</option><option selected>Garden room</option></select><svg data-kit-icon="caret-down" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"/></svg></div>
<output for="form-select">Garden room</output>
</div>
<p class="specimen-case-line">Room selection while bookings cannot be changed.</p>
<div data-kit-role="form-group">
<label for="form-select-disabled">Select</label>
<div data-kit-region="select"><select id="form-select-disabled" name="select-disabled" disabled><option>All rooms</option><option selected>Garden room</option></select><svg data-kit-icon="caret-down" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"/></svg></div>
<output for="form-select-disabled">Garden room</output>
</div>
<div data-kit-role="form-group" data-kit-holds="help">
<label for="form-file">File</label>
<input id="form-file" name="file" type="file" accept=".csv,.tsv" aria-describedby="form-file-help">
<span data-kit-region="help" id="form-file-help">Accepts CSV and TSV files.</span>
</div>
<div data-kit-role="form-group" data-kit-holds="help">
<label for="form-files">Files</label>
<input id="form-files" name="files" type="file" multiple accept=".csv,.tsv" aria-describedby="form-files-help">
<ul>
<li data-kit-state="uploaded"><span id="form-files-bookings" data-kit-region="file-name"><span data-kit-region="head">bookings-2025</span><span data-kit-region="tail">.csv</span></span> <span>Uploaded</span> <button type="button" data-kit-role="secondary-action" aria-label="Remove bookings-2025.csv"><span data-kit-region="label">Remove</span></button></li>
<li data-kit-state="refused"><span id="form-files-hirers" data-kit-region="file-name"><span data-kit-region="head">hirers</span><span data-kit-region="tail">.xlsx</span></span> <span>Refused</span> <span>Excel files cannot be added.</span> <button type="button" data-kit-role="secondary-action" aria-label="Remove hirers.xlsx"><span data-kit-region="label">Remove</span></button></li>
</ul>
<span data-kit-region="help" id="form-files-help">Accepts CSV and TSV files.</span>
</div>
<div data-kit-role="form-group">
<label for="form-password">Password</label>
<div data-kit-region="control">
<input id="form-password" name="password" type="password" value="oakmere-hall-2025" autocomplete="current-password">
<button type="button" data-kit-role="secondary-action" data-kit-resting-label="Show" data-kit-changed-label="Hide"><span data-kit-region="label">Show</span></button>
</div>
</div>
<div data-kit-role="form-group" data-kit-holds="help">
<label for="form-new-password">New password</label>
<div data-kit-region="control">
<input id="form-new-password" name="new-password" type="password" value="garden-room-keys" autocomplete="new-password" aria-describedby="form-new-password-help">
<button type="button" data-kit-role="secondary-action" data-kit-resting-label="Show" data-kit-changed-label="Hide"><span data-kit-region="label">Show</span></button>
</div>
<span data-kit-region="help" id="form-new-password-help">At least twelve characters.</span>
</div>
<div data-kit-role="form-group" data-kit-width="medium" data-kit-holds="help">
<label for="form-reference">Booking reference</label>
<div data-kit-region="control">
<input id="form-reference" name="reference" type="text" value="" aria-describedby="form-reference-help">
<button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Scan</span></button>
</div>
<output for="form-reference">No reference given</output>
<div data-kit-region="stream">
<video data-kit-region="camera" muted playsinline></video>
<button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Cancel</span></button>
</div>
<span data-kit-region="help" id="form-reference-help">On the hirer’s confirmation, above the date.</span>
</div>
<div data-kit-role="form-group" data-kit-width="medium" data-kit-holds="help">
<label for="form-reference-refused">Booking reference</label>
<div data-kit-region="control">
<input id="form-reference-refused" name="reference-refused" type="text" value="" aria-describedby="form-reference-refused-help">
<button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Scan</span></button>
</div>
<output for="form-reference-refused">No reference given</output>
<div data-kit-region="stream">
<p>Camera not available. Type the reference.</p>
</div>
<span data-kit-region="help" id="form-reference-refused-help">On the hirer’s confirmation, above the date.</span>
</div>
<div data-kit-role="form-group" data-kit-holds="help">
<label for="form-limited">Note for the caretaker</label>
<textarea id="form-limited" name="limited" maxlength="160" aria-describedby="form-limited-count form-limited-help">Side gate open from half past five.</textarea>
<output for="form-limited">Side gate open from half past five.</output>
<span data-kit-region="count" id="form-limited-count">35 of 160 characters</span>
<span data-kit-region="help" id="form-limited-help">The caretaker reads this note when the booking starts.</span>
</div>
<div data-kit-role="form-group">
<label for="form-parts">Text message to the hirer</label>
<textarea id="form-parts" name="parts" aria-describedby="form-parts-count">Your booking on 14 February is confirmed. The side gate is open from half past five and the caretaker will meet you at the hall door.</textarea>
<output for="form-parts">Your booking on 14 February is confirmed. The side gate is open from half past five and the caretaker will meet you at the hall door.</output>
<span data-kit-region="count" id="form-parts-count">Sends as 1 message</span>
</div>
<div data-kit-role="form-group">
<label for="form-textarea">Text area</label>
<textarea id="form-textarea" name="textarea">Add a note for the caretaker.</textarea>
<output for="form-textarea">Add a note for the caretaker.</output>
</div>
<fieldset>
<div data-kit-role="form-group" id="form-range-first">
<label for="form-range-first-control" id="form-range-first-label">First</label>
<div data-kit-role="date-field" id="form-range-first-control-date-field" data-kit-dates='{"direction":"either","firstDay":"mon","locale":"en-GB","quarters":{"names":[["1st quarter","Q1"],["2nd quarter","Q2"],["3rd quarter","Q3"],["4th quarter","Q4"]],"words":[]},"today":"2025-02-10"}'>
<input id="form-range-first-control" type="text" autocomplete="off" value="Monday, 10 February 2025" aria-describedby="form-range-first-control-resolved" aria-expanded="false" aria-controls="form-range-first-control-month"><span data-kit-region="widest-dates" aria-hidden="true">Wednesday, 22 January 2025
Thursday, 23 January 2025
Friday, 24 January 2025
Saturday, 25 January 2025
Sunday, 26 January 2025
Monday, 27 January 2025
Tuesday, 28 January 2025
Saturday, 22 February 2025
Sunday, 23 February 2025
Monday, 24 February 2025
Tuesday, 25 February 2025
Wednesday, 26 February 2025
Thursday, 27 February 2025
Friday, 28 February 2025
Saturday, 22 March 2025
Sunday, 23 March 2025
Monday, 24 March 2025
Tuesday, 25 March 2025
Wednesday, 26 March 2025
Thursday, 27 March 2025
Friday, 28 March 2025
Tuesday, 22 April 2025
Wednesday, 23 April 2025
Thursday, 24 April 2025
Friday, 25 April 2025
Saturday, 26 April 2025
Sunday, 27 April 2025
Monday, 28 April 2025
Thursday, 22 May 2025
Friday, 23 May 2025
Saturday, 24 May 2025
Sunday, 25 May 2025
Monday, 26 May 2025
Tuesday, 27 May 2025
Wednesday, 28 May 2025
Sunday, 22 June 2025
Monday, 23 June 2025
Tuesday, 24 June 2025
Wednesday, 25 June 2025
Thursday, 26 June 2025
Friday, 27 June 2025
Saturday, 28 June 2025
Tuesday, 22 July 2025
Wednesday, 23 July 2025
Thursday, 24 July 2025
Friday, 25 July 2025
Saturday, 26 July 2025
Sunday, 27 July 2025
Monday, 28 July 2025
Friday, 22 August 2025
Saturday, 23 August 2025
Sunday, 24 August 2025
Monday, 25 August 2025
Tuesday, 26 August 2025
Wednesday, 27 August 2025
Thursday, 28 August 2025
Monday, 22 September 2025
Tuesday, 23 September 2025
Wednesday, 24 September 2025
Thursday, 25 September 2025
Friday, 26 September 2025
Saturday, 27 September 2025
Sunday, 28 September 2025
Wednesday, 22 October 2025
Thursday, 23 October 2025
Friday, 24 October 2025
Saturday, 25 October 2025
Sunday, 26 October 2025
Monday, 27 October 2025
Tuesday, 28 October 2025
Saturday, 22 November 2025
Sunday, 23 November 2025
Monday, 24 November 2025
Tuesday, 25 November 2025
Wednesday, 26 November 2025
Thursday, 27 November 2025
Friday, 28 November 2025
Monday, 22 December 2025
Tuesday, 23 December 2025
Wednesday, 24 December 2025
Thursday, 25 December 2025
Friday, 26 December 2025
Saturday, 27 December 2025
Sunday, 28 December 2025</span>
<span id="form-range-first-control-resolved" data-kit-region="resolved" aria-live="polite"></span>
<button type="button" data-kit-role="icon-action" data-kit-region="calendar" id="form-range-first-control-calendar" aria-label="Calendar" aria-describedby="form-range-first-control"><svg data-kit-icon="calendar-blank" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M208,32H184V24a8,8,0,0,0-16,0v8H88V24a8,8,0,0,0-16,0v8H48A16,16,0,0,0,32,48V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V48A16,16,0,0,0,208,32ZM72,48v8a8,8,0,0,0,16,0V48h80v8a8,8,0,0,0,16,0V48h24V80H48V48ZM208,208H48V96H208V208Z"/></svg></button>
<input type="hidden" name="range-first" value="2025-02-10">
<div id="form-range-first-control-month" data-kit-role="popover" data-kit-region="month" popover="manual"></div>
</div>
<output for="form-range-first-control"><time datetime="2025-02-10">Monday, 10 February 2025</time></output>
</div>
<div data-kit-role="form-group" id="form-range-last">
<label for="form-range-last-control" id="form-range-last-label">Last</label>
<div data-kit-role="date-field" id="form-range-last-control-date-field" data-kit-dates='{"direction":"either","firstDay":"mon","locale":"en-GB","quarters":{"names":[["1st quarter","Q1"],["2nd quarter","Q2"],["3rd quarter","Q3"],["4th quarter","Q4"]],"words":[]},"today":"2025-02-10"}'>
<input id="form-range-last-control" type="text" autocomplete="off" value="Sunday, 16 February 2025" aria-describedby="form-range-last-control-resolved" aria-expanded="false" aria-controls="form-range-last-control-month"><span data-kit-region="widest-dates" aria-hidden="true">Wednesday, 22 January 2025
Thursday, 23 January 2025
Friday, 24 January 2025
Saturday, 25 January 2025
Sunday, 26 January 2025
Monday, 27 January 2025
Tuesday, 28 January 2025
Saturday, 22 February 2025
Sunday, 23 February 2025
Monday, 24 February 2025
Tuesday, 25 February 2025
Wednesday, 26 February 2025
Thursday, 27 February 2025
Friday, 28 February 2025
Saturday, 22 March 2025
Sunday, 23 March 2025
Monday, 24 March 2025
Tuesday, 25 March 2025
Wednesday, 26 March 2025
Thursday, 27 March 2025
Friday, 28 March 2025
Tuesday, 22 April 2025
Wednesday, 23 April 2025
Thursday, 24 April 2025
Friday, 25 April 2025
Saturday, 26 April 2025
Sunday, 27 April 2025
Monday, 28 April 2025
Thursday, 22 May 2025
Friday, 23 May 2025
Saturday, 24 May 2025
Sunday, 25 May 2025
Monday, 26 May 2025
Tuesday, 27 May 2025
Wednesday, 28 May 2025
Sunday, 22 June 2025
Monday, 23 June 2025
Tuesday, 24 June 2025
Wednesday, 25 June 2025
Thursday, 26 June 2025
Friday, 27 June 2025
Saturday, 28 June 2025
Tuesday, 22 July 2025
Wednesday, 23 July 2025
Thursday, 24 July 2025
Friday, 25 July 2025
Saturday, 26 July 2025
Sunday, 27 July 2025
Monday, 28 July 2025
Friday, 22 August 2025
Saturday, 23 August 2025
Sunday, 24 August 2025
Monday, 25 August 2025
Tuesday, 26 August 2025
Wednesday, 27 August 2025
Thursday, 28 August 2025
Monday, 22 September 2025
Tuesday, 23 September 2025
Wednesday, 24 September 2025
Thursday, 25 September 2025
Friday, 26 September 2025
Saturday, 27 September 2025
Sunday, 28 September 2025
Wednesday, 22 October 2025
Thursday, 23 October 2025
Friday, 24 October 2025
Saturday, 25 October 2025
Sunday, 26 October 2025
Monday, 27 October 2025
Tuesday, 28 October 2025
Saturday, 22 November 2025
Sunday, 23 November 2025
Monday, 24 November 2025
Tuesday, 25 November 2025
Wednesday, 26 November 2025
Thursday, 27 November 2025
Friday, 28 November 2025
Monday, 22 December 2025
Tuesday, 23 December 2025
Wednesday, 24 December 2025
Thursday, 25 December 2025
Friday, 26 December 2025
Saturday, 27 December 2025
Sunday, 28 December 2025</span>
<span id="form-range-last-control-resolved" data-kit-region="resolved" aria-live="polite"></span>
<button type="button" data-kit-role="icon-action" data-kit-region="calendar" id="form-range-last-control-calendar" aria-label="Calendar" aria-describedby="form-range-last-control"><svg data-kit-icon="calendar-blank" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M208,32H184V24a8,8,0,0,0-16,0v8H88V24a8,8,0,0,0-16,0v8H48A16,16,0,0,0,32,48V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V48A16,16,0,0,0,208,32ZM72,48v8a8,8,0,0,0,16,0V48h80v8a8,8,0,0,0,16,0V48h24V80H48V48ZM208,208H48V96H208V208Z"/></svg></button>
<input type="hidden" name="range-last" value="2025-02-16">
<div id="form-range-last-control-month" data-kit-role="popover" data-kit-region="month" popover="manual"></div>
</div>
<output for="form-range-last-control"><time datetime="2025-02-16">Sunday, 16 February 2025</time></output>
</div>
</fieldset>
<fieldset>
<div>
<div data-kit-role="form-group" data-kit-width="narrow">
<label for="form-chairs-out">Chairs out</label>
<input id="form-chairs-out" name="chairs-out" type="text" inputmode="numeric" value="40">
<output for="form-chairs-out">40</output>
</div>
<div data-kit-role="form-group" data-kit-width="narrow">
<label for="form-deposit-held">Deposit held</label>
<input id="form-deposit-held" name="deposit-held" type="text" inputmode="decimal" value="50">
<output for="form-deposit-held">50</output>
</div>
</div>
</fieldset>
<p class="specimen-case-line" id="role-form-group-marks">A field that may be left empty, empty and filled, beside a required field.</p>
<div data-kit-role="form-group" data-kit-width="medium" id="form-reference-empty">
<label for="form-reference-empty-control">Purchase order <span data-kit-region="optional">(optional)</span></label>
<input id="form-reference-empty-control" name="purchase_order" type="text">
</div>
<div data-kit-role="form-group" data-kit-width="medium" id="form-reference-filled">
<label for="form-reference-filled-control">Purchase order <span data-kit-region="optional">(optional)</span></label>
<input id="form-reference-filled-control" name="purchase_order_filled" type="text" value="PO-4471">
</div>
<div data-kit-role="form-group" data-kit-width="medium" id="form-hirer-required">
<label for="form-hirer-required-control">Hirer name</label>
<input id="form-hirer-required-control" name="hirer_name" type="text" required autocomplete="hirer-name" data-1p-ignore>
</div>
<p class="specimen-case-line" id="role-form-group-search">A search holding text, with Clear.</p>
<div data-kit-role="form-group" id="form-search">
<label for="form-search-control">Search bookings</label>
<div data-kit-region="control">
<input id="form-search-control" name="q" type="search" enterkeyhint="search" value="Oakmere" placeholder="Find bookings by hirer name">
<button type="button" data-kit-role="icon-action" data-kit-region="clear" id="form-search-control-clear" aria-label="Clear"><svg data-kit-icon="x" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"/></svg></button>
</div>
</div>
<p class="specimen-case-line" id="role-form-group-scan-search">A search for booking references, with Clear and Scan.</p>
<div data-kit-role="form-group" id="form-scan-search">
<label for="form-scan-search-control">Search booking references</label>
<div data-kit-region="control">
<input id="form-scan-search-control" name="q" type="search" enterkeyhint="search" placeholder="Find bookings by reference">
<button type="button" data-kit-role="icon-action" data-kit-region="clear" id="form-scan-search-control-clear" aria-label="Clear" hidden><svg data-kit-icon="x" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"/></svg></button>
<button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Scan</span></button>
</div>
<div data-kit-region="stream">
<video data-kit-region="camera" muted playsinline></video>
<button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Cancel</span></button>
</div>
</div>
<p class="specimen-case-line" id="role-form-group-paste">A field that takes a paste of several lines.</p>
<form>
<div data-kit-role="form-group" data-kit-width="medium" id="form-paste">
<label for="form-paste-control">Hirer</label>
<input id="form-paste-control" name="hirer" type="text" autocomplete="hirer-name" data-1p-ignore data-kit-paste='{"kind":"invoices","locale":"en-GB"}'>
<div id="form-paste-paste" data-kit-region="paste" hidden>
<p data-kit-role="status-line" role="status" aria-live="polite"></p>
<button type="submit" data-kit-role="secondary-action" name="hirers"><span data-kit-region="label"></span></button>
</div>
</div>
</form>
<p>The form owns the submit action.</p>
<p class="specimen-case-line" id="role-form-group-disabled-password">A password that cannot be changed, with Show disabled.</p>
<div data-kit-role="form-group" data-kit-holds="help">
<label for="form-password-disabled">Password</label>
<div data-kit-region="control">
<input id="form-password-disabled" name="password" type="password" value="oakmere-hall-2025" autocomplete="current-password" disabled aria-describedby="form-password-disabled-help">
<button type="button" data-kit-role="secondary-action" data-kit-resting-label="Show" data-kit-changed-label="Hide" disabled><span data-kit-region="label">Show</span></button>
</div>
<span data-kit-region="help" id="form-password-disabled-help">Password cannot be changed.</span>
</div>
<p class="specimen-case-line" id="role-form-group-disabled-scan">A booking reference that cannot be changed, with Scan disabled.</p>
<div data-kit-role="form-group" data-kit-width="medium" data-kit-holds="help">
<label for="form-reference-disabled">Booking reference</label>
<div data-kit-region="control">
<input id="form-reference-disabled" name="reference" type="text" value="" disabled aria-describedby="form-reference-disabled-help">
<button type="button" data-kit-role="secondary-action" disabled><span data-kit-region="label">Scan</span></button>
</div>
<output for="form-reference-disabled">No reference given</output>
<div data-kit-region="stream" hidden>
<video data-kit-region="camera" muted playsinline></video>
<button type="button" data-kit-role="secondary-action" disabled><span data-kit-region="label">Cancel</span></button>
</div>
<span data-kit-region="help" id="form-reference-disabled-help">Booking reference cannot be changed.</span>
</div>
<p class="specimen-case-line" id="role-form-group-disabled-file">A file that cannot be changed, with its selector disabled.</p>
<div data-kit-role="form-group" data-kit-holds="help">
<label for="form-file-disabled">File</label>
<input id="form-file-disabled" name="file" type="file" accept=".csv,.tsv" disabled aria-describedby="form-file-disabled-help">
<span data-kit-region="help" id="form-file-disabled-help">Files cannot be changed. Accepts CSV and TSV files.</span>
</div>
<p class="specimen-case-line" id="role-form-group-disabled-files">Files that cannot be changed, with their selector and Remove disabled.</p>
<div data-kit-role="form-group" data-kit-holds="help">
<label for="form-files-disabled">Files</label>
<input id="form-files-disabled" name="files" type="file" multiple accept=".csv,.tsv" disabled aria-describedby="form-files-disabled-help">
<ul>
<li data-kit-state="uploaded"><span id="form-files-disabled-bookings" data-kit-region="file-name"><span data-kit-region="head">bookings-2025</span><span data-kit-region="tail">.csv</span></span> <span>Uploaded</span> <button type="button" data-kit-role="secondary-action" aria-label="Remove bookings-2025.csv" disabled><span data-kit-region="label">Remove</span></button></li>
</ul>
<span data-kit-region="help" id="form-files-disabled-help">Files cannot be changed. Accepts CSV and TSV files.</span>
</div>
<p class="specimen-case-line" id="role-form-group-disabled-search">A search that cannot be changed, with Clear disabled.</p>
<div data-kit-role="form-group" data-kit-holds="help" id="form-search-disabled">
<label for="form-search-disabled-control">Search bookings</label>
<div data-kit-region="control">
<input id="form-search-disabled-control" name="q" type="search" enterkeyhint="search" value="Oakmere" placeholder="Find bookings by hirer name" disabled aria-describedby="form-search-disabled-help">
<button type="button" data-kit-role="icon-action" data-kit-region="clear" id="form-search-disabled-control-clear" aria-label="Clear" disabled><svg data-kit-icon="x" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"/></svg></button>
</div>
<span data-kit-region="help" id="form-search-disabled-help">Search cannot be changed.</span>
</div>
<p class="specimen-case-line" id="role-form-group-mentions">A note that can mention people and jobs.</p>
<div data-kit-role="form-group" id="form-note">
<label id="form-note-label">Note</label>
<div data-kit-region="editor" id="form-note-control-editor" data-kit-admits='{"blocks":[],"insertions":["mention"]}'>
<div data-kit-region="writing" id="form-note-control-writing">
<div id="form-note-control" data-kit-region="text" role="textbox" contenteditable="true" aria-multiline="true" aria-autocomplete="list" aria-labelledby="form-note-label" data-kit-authored-text="true"><p>Ask <span data-kit-region="mention">@Daniel Okafor</span> about the boiler.</p></div>
<input type="hidden" name="note" value='{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Ask "},{"type":"mention","attrs":{"kind":"person","id":"p-daniel","label":"Daniel Okafor"}},{"type":"text","text":" about the boiler."}]}]}'>
</div>
<ul id="form-note-control-suggestions" data-kit-role="popover" data-kit-region="suggestions" popover="manual" role="listbox" aria-labelledby="form-note-label">
<li id="form-note-control-suggestion-person-p-dana" role="option" data-kit-region="person" data-value="p-dana"><span data-kit-role="avatar" aria-hidden="true"><span data-kit-region="initials">DR</span></span><span data-kit-region="match-name"><mark>Da</mark>na Reyes</span><span data-kit-region="match-fact"><span data-kit-region="email"><span><span>dana@</span><wbr /><span>oakmerebuilders<wbr />.co.uk</span></span></span></span></li>
<li id="form-note-control-suggestion-person-p-adam" role="option" data-kit-region="person" data-value="p-adam"><span data-kit-role="avatar" aria-hidden="true"><span data-kit-region="initials">AP</span></span><span data-kit-region="match-name">A<mark>da</mark>m Price</span><span data-kit-region="match-fact"><span data-kit-region="email"><span><span>adam@</span><wbr /><span>oakmerebuilders<wbr />.co.uk</span></span></span></span></li>
<li role="presentation" data-kit-region="separator"></li>
<li id="form-note-control-suggestion-person-p-daniel" role="option" data-kit-region="person" data-value="p-daniel"><span data-kit-role="avatar" aria-hidden="true"><span data-kit-region="initials">DO</span></span><span data-kit-region="match-name"><mark>Da</mark>niel Okafor</span><span data-kit-region="match-fact"><span data-kit-region="email"><span><span>daniel@</span><wbr /><span>okaforplumbing<wbr />.co.uk</span></span></span></span><span data-kit-region="reason">No access</span></li>
<li role="presentation" data-kit-region="separator"></li>
<li id="form-note-control-suggestion-subject-j-2214" role="option" data-kit-region="subject" data-value="j-2214"><svg data-kit-icon="wrench" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M226.76,69a8,8,0,0,0-12.84-2.88l-40.3,37.19-17.23-3.7-3.7-17.23,37.19-40.3A8,8,0,0,0,187,29.24,72,72,0,0,0,88,96,72.34,72.34,0,0,0,94,124.94L33.79,177c-.15.12-.29.26-.43.39a32,32,0,0,0,45.26,45.26c.13-.13.27-.28.39-.42L131.06,162A72,72,0,0,0,232,96,71.56,71.56,0,0,0,226.76,69ZM160,152a56.14,56.14,0,0,1-27.07-7,8,8,0,0,0-9.92,1.77L67.11,211.51a16,16,0,0,1-22.62-22.62L109.18,133a8,8,0,0,0,1.77-9.93,56,56,0,0,1,58.36-82.31l-31.2,33.81a8,8,0,0,0-1.94,7.1L141.83,108a8,8,0,0,0,6.14,6.14l26.35,5.66a8,8,0,0,0,7.1-1.94l33.81-31.2A56.06,56.06,0,0,1,160,152Z"/></svg><span data-kit-region="match-name"><mark>Da</mark>vies kitchen refit</span><span data-kit-region="match-fact">JOB-2214</span></li>
</ul>
<ul id="form-note-control-commands" data-kit-role="popover" data-kit-region="commands" popover="manual" role="listbox" aria-labelledby="form-note-label"></ul>
<p data-kit-role="status-line" role="status" aria-live="polite">Daniel Okafor will not be told.</p>
</div>
</div>
<p class="specimen-case-line" id="role-form-group-disabled-note">A note that cannot be changed.</p>
<div data-kit-role="form-group" data-kit-holds="help" id="form-note-disabled">
<label id="form-note-disabled-label">Note</label>
<div data-kit-region="editor" id="form-note-disabled-control-editor" data-kit-admits='{"blocks":[],"insertions":["mention"]}'>
<div data-kit-region="writing" id="form-note-disabled-control-writing">
<div id="form-note-disabled-control" data-kit-region="text" role="textbox" contenteditable="false" aria-disabled="true" aria-multiline="true" aria-autocomplete="list" aria-labelledby="form-note-disabled-label" aria-describedby="form-note-disabled-help" data-kit-authored-text="true"><p>Ask <span data-kit-region="mention">@Dana Reyes</span> for the gate code.</p></div>
<input type="hidden" name="note" value='{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Ask "},{"type":"mention","attrs":{"kind":"person","id":"p-dana","label":"Dana Reyes"}},{"type":"text","text":" for the gate code."}]}]}' disabled>
</div>
<ul id="form-note-disabled-control-suggestions" data-kit-role="popover" data-kit-region="suggestions" popover="manual" role="listbox" aria-labelledby="form-note-disabled-label"></ul>
<ul id="form-note-disabled-control-commands" data-kit-role="popover" data-kit-region="commands" popover="manual" role="listbox" aria-labelledby="form-note-disabled-label"></ul>
<p data-kit-role="status-line" role="status" aria-live="polite"></p>
</div>
<span data-kit-region="help" id="form-note-disabled-help">Notes cannot be changed.</span>
</div>
<p class="specimen-case-line" id="role-form-group-every-block">A description that takes headings, lists, checklists, quotes, code, mentions, dates and files.</p>
<div data-kit-role="form-group" id="form-description">
<label id="form-description-label">Description</label>
<div data-kit-region="editor" id="form-description-control-editor" data-kit-admits='{"blocks":["heading","bulletList","orderedList","taskList","blockquote","codeBlock"],"insertions":["mention","date","file"]}' data-kit-dates='{"direction":"either","firstDay":"mon","locale":"en-GB","quarters":{"names":[["1st quarter","Q1"],["2nd quarter","Q2"],["3rd quarter","Q3"],["4th quarter","Q4"]],"words":[]},"today":"2025-02-10"}' data-kit-file-words='{"refused":"Refused","uploaded":"Uploaded","uploading":"Uploading"}'>
<div data-kit-region="writing" id="form-description-control-writing">
<div id="form-description-control" data-kit-region="text" role="textbox" contenteditable="true" aria-multiline="true" aria-autocomplete="list" aria-labelledby="form-description-label" data-kit-authored-text="true"><h5>Kitchen refit</h5><p>Start on <time datetime="2025-02-17">17 February 2025</time> once <span data-kit-region="mention">@Dana Reyes</span> has the keys. Keep the <strong>boiler</strong> off, <em>ventilate</em> the room and read <a href="https://oakmerebuilders.co.uk/survey">the survey</a>. The lockbox code is <code>4471</code>.</p><p>Floor plan: kitchen-plan.pdf</p><ul><li><p>Strip the units</p></li><li><p>Move the sink</p></li></ul><ol><li><p>Isolate the water</p></li><li><p>Cap the pipes</p></li></ol><ul><li><svg data-kit-icon="check-square" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M173.66,98.34a8,8,0,0,1,0,11.32l-56,56a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L112,148.69l50.34-50.35A8,8,0,0,1,173.66,98.34ZM224,48V208a16,16,0,0,1-16,16H48a16,16,0,0,1-16-16V48A16,16,0,0,1,48,32H208A16,16,0,0,1,224,48ZM208,208V48H48V208H208Z"></path></svg><span data-kit-region="spoken">Done</span><p>Order the worktop</p></li><li><svg data-kit-icon="square" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M208,32H48A16,16,0,0,0,32,48V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V48A16,16,0,0,0,208,32Zm0,176H48V48H208V208Z"></path></svg><span data-kit-region="spoken">Not done</span><p>Book the electrician</p></li></ul><blockquote><p>Leave the side gate unlocked.</p></blockquote><pre><code>Gate code: 4471</code></pre></div>
<input type="hidden" name="description" value='{"type":"doc","content":[{"type":"heading","content":[{"type":"text","text":"Kitchen refit"}]},{"type":"paragraph","content":[{"type":"text","text":"Start on "},{"type":"date","attrs":{"date":"2025-02-17"}},{"type":"text","text":" once "},{"type":"mention","attrs":{"kind":"person","id":"p-dana","label":"Dana Reyes"}},{"type":"text","text":" has the keys. Keep the "},{"type":"text","marks":[{"type":"bold"}],"text":"boiler"},{"type":"text","text":" off, "},{"type":"text","marks":[{"type":"italic"}],"text":"ventilate"},{"type":"text","text":" the room and read "},{"type":"text","marks":[{"type":"link","attrs":{"href":"https://oakmerebuilders.co.uk/survey"}}],"text":"the survey"},{"type":"text","text":". The lockbox code is "},{"type":"text","marks":[{"type":"code"}],"text":"4471"},{"type":"text","text":"."}]},{"type":"paragraph","content":[{"type":"text","text":"Floor plan: "},{"type":"file","attrs":{"id":"floor-plan","name":"kitchen-plan.pdf"}}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Strip the units"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Move the sink"}]}]}]},{"type":"orderedList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Isolate the water"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Cap the pipes"}]}]}]},{"type":"taskList","content":[{"type":"taskItem","attrs":{"checked":true},"content":[{"type":"paragraph","content":[{"type":"text","text":"Order the worktop"}]}]},{"type":"taskItem","attrs":{"checked":false},"content":[{"type":"paragraph","content":[{"type":"text","text":"Book the electrician"}]}]}]},{"type":"blockquote","content":[{"type":"paragraph","content":[{"type":"text","text":"Leave the side gate unlocked."}]}]},{"type":"codeBlock","content":[{"type":"text","text":"Gate code: 4471"}]}]}'>
</div>
<ul id="form-description-control-suggestions" data-kit-role="popover" data-kit-region="suggestions" popover="manual" role="listbox" aria-labelledby="form-description-label"></ul>
<ul id="form-description-control-commands" data-kit-role="popover" data-kit-region="commands" popover="manual" role="listbox" aria-labelledby="form-description-label"></ul>
<div id="form-description-control-month" data-kit-role="popover" data-kit-region="month" popover="manual"></div>
<input type="file" hidden>
<p data-kit-role="status-line" role="status" aria-live="polite"></p>
</div>
</div>
Form group, error
The email control is described by its help, then its error, and is invalid.
Source
<p class="specimen-case-line">The email control is described by its help, then its error, and is invalid.</p>
<fieldset>
<div data-kit-role="form-group" data-kit-holds="help" data-kit-state="error">
<label for="billing-email-error">Billing email</label>
<input id="billing-email-error" name="email" type="email" value="accounts@" autocomplete="hirer-billing-email" data-1p-ignore aria-invalid="true" aria-describedby="billing-error-help billing-error">
<output for="billing-email-error">accounts@</output>
<span data-kit-region="help" id="billing-error-help">Use the address that receives the hirer’s invoices.</span>
<span data-kit-region="error" id="billing-error">Enter a complete billing email, such as aisha@oakmereprimary.org.</span>
</div>
<div data-kit-role="form-group" data-kit-width="medium">
<label for="form-error-neighbour">Text</label>
<input id="form-error-neighbour" name="text" type="text" value="Oakmere Village Hall">
<output for="form-error-neighbour">Oakmere Village Hall</output>
</div>
</fieldset>
Form group, shown
A shown password that cannot be changed, with Hide disabled.
Source
<div data-kit-role="form-group">
<label for="form-password-shown">Password</label>
<div data-kit-region="control">
<input id="form-password-shown" name="password" type="text" value="oakmere-hall-2025" autocomplete="current-password">
<button type="button" data-kit-role="secondary-action" data-kit-resting-label="Show" data-kit-changed-label="Hide"><span data-kit-region="label">Hide</span></button>
</div>
</div>
<div data-kit-role="form-group" data-kit-holds="help">
<label for="form-new-password-shown">New password</label>
<div data-kit-region="control">
<input id="form-new-password-shown" name="new-password" type="text" value="garden-room-keys" autocomplete="new-password" aria-describedby="form-new-password-shown-help">
<button type="button" data-kit-role="secondary-action" data-kit-resting-label="Show" data-kit-changed-label="Hide"><span data-kit-region="label">Hide</span></button>
</div>
<span data-kit-region="help" id="form-new-password-shown-help">At least twelve characters.</span>
</div>
<p class="specimen-case-line" id="role-form-group-disabled-hide">A shown password that cannot be changed, with Hide disabled.</p>
<div data-kit-role="form-group" data-kit-holds="help">
<label for="form-password-shown-disabled">Password</label>
<div data-kit-region="control">
<input id="form-password-shown-disabled" name="password" type="text" value="oakmere-hall-2025" autocomplete="current-password" disabled aria-describedby="form-password-shown-disabled-help">
<button type="button" data-kit-role="secondary-action" data-kit-resting-label="Show" data-kit-changed-label="Hide" disabled><span data-kit-region="label">Hide</span></button>
</div>
<span data-kit-region="help" id="form-password-shown-disabled-help">Password cannot be changed.</span>
</div>
Form group, chosen
- bookings-2025.csv Chosen
- hirers.csv Chosen
Source
<div data-kit-role="form-group" data-kit-holds="help">
<label for="form-files-chosen">Hirer records</label>
<input id="form-files-chosen" name="files" type="file" multiple accept=".csv,.tsv" aria-describedby="form-files-chosen-help">
<ul>
<li data-kit-state="chosen"><span id="form-files-chosen-bookings" data-kit-region="file-name"><span data-kit-region="head">bookings-2025</span><span data-kit-region="tail">.csv</span></span> <span>Chosen</span> <button type="button" data-kit-role="secondary-action" aria-label="Remove bookings-2025.csv"><span data-kit-region="label">Remove</span></button></li>
<li data-kit-state="chosen"><span id="form-files-chosen-hirers" data-kit-region="file-name"><span data-kit-region="head">hirers</span><span data-kit-region="tail">.csv</span></span> <span>Chosen</span> <button type="button" data-kit-role="secondary-action" aria-label="Remove hirers.csv"><span data-kit-region="label">Remove</span></button></li>
</ul>
<span data-kit-region="help" id="form-files-chosen-help">Accepts CSV and TSV files.</span>
</div>
Form group, uploading
- oakmere-primary-school-bookings-and-collections-2025.csv Uploading
- hirers.csv Uploading
Source
<div data-kit-role="form-group" data-kit-holds="help">
<label for="form-files-uploading">Hirer records</label>
<input id="form-files-uploading" name="files" type="file" multiple accept=".csv,.tsv" aria-describedby="form-files-uploading-help">
<ul>
<li data-kit-state="uploading"><span id="form-files-uploading-bookings" data-kit-region="file-name"><span data-kit-region="head">oakmere-primary-school-bookings-and-collections-2025</span><span data-kit-region="tail">.csv</span></span> <span>Uploading</span> <button type="button" data-kit-role="secondary-action" aria-label="Remove oakmere-primary-school-bookings-and-collections-2025.csv"><span data-kit-region="label">Remove</span></button></li>
<li data-kit-state="uploading"><span id="form-files-uploading-hirers" data-kit-region="file-name"><span data-kit-region="head">hirers</span><span data-kit-region="tail">.csv</span></span> <span>Uploading</span> <button type="button" data-kit-role="secondary-action" aria-label="Remove hirers.csv"><span data-kit-region="label">Remove</span></button></li>
</ul>
<span data-kit-region="help" id="form-files-uploading-help">Accepts CSV and TSV files.</span>
</div>
Form group, uploaded
- oakmere-primary-school-bookings-and-collections-2025.csv Uploaded
- hirers.csv Uploaded
An uploaded file whose name opens it.
- media-audio.mp3 Uploaded
Source
<div data-kit-role="form-group" data-kit-holds="help">
<label for="form-files-uploaded">Hirer records</label>
<input id="form-files-uploaded" name="files" type="file" multiple accept=".csv,.tsv" aria-describedby="form-files-uploaded-help">
<ul>
<li data-kit-state="uploaded"><span id="form-files-uploaded-bookings" data-kit-region="file-name"><span data-kit-region="head">oakmere-primary-school-bookings-and-collections-2025</span><span data-kit-region="tail">.csv</span></span> <span>Uploaded</span> <button type="button" data-kit-role="secondary-action" aria-label="Remove oakmere-primary-school-bookings-and-collections-2025.csv"><span data-kit-region="label">Remove</span></button></li>
<li data-kit-state="uploaded"><span id="form-files-uploaded-hirers" data-kit-region="file-name"><span data-kit-region="head">hirers</span><span data-kit-region="tail">.csv</span></span> <span>Uploaded</span> <button type="button" data-kit-role="secondary-action" aria-label="Remove hirers.csv"><span data-kit-region="label">Remove</span></button></li>
</ul>
<span data-kit-region="help" id="form-files-uploaded-help">Accepts CSV and TSV files.</span>
</div>
<p class="specimen-case-line" id="role-form-group-linked-file">An uploaded file whose name opens it.</p>
<div data-kit-role="form-group" data-kit-holds="help">
<label for="form-file-linked">Audio file</label>
<input id="form-file-linked" name="audio" type="file" accept=".mp3" aria-describedby="form-file-linked-help">
<ul>
<li data-kit-state="uploaded"><a id="form-file-linked-name" href="../media/media-audio.mp3" data-kit-region="file-name"><span data-kit-region="head">media-audio</span><span data-kit-region="tail">.mp3</span></a> <span>Uploaded</span> <button type="button" data-kit-role="secondary-action" aria-label="Remove media-audio.mp3"><span data-kit-region="label">Remove</span></button></li>
</ul>
<span data-kit-region="help" id="form-file-linked-help">Accepts MP3 files.</span>
</div>
Form group, refused
- hirers.xlsx Refused Excel files cannot be added.
- bookings-2025.csv Uploaded
Source
<div data-kit-role="form-group" data-kit-holds="help">
<label for="form-files-refused">Hirer records</label>
<input id="form-files-refused" name="files" type="file" multiple accept=".csv,.tsv" aria-describedby="form-files-refused-help">
<ul>
<li data-kit-state="refused"><span id="form-files-refused-hirers" data-kit-region="file-name"><span data-kit-region="head">hirers</span><span data-kit-region="tail">.xlsx</span></span> <span>Refused</span> <span>Excel files cannot be added.</span> <button type="button" data-kit-role="secondary-action" aria-label="Remove hirers.xlsx"><span data-kit-region="label">Remove</span></button></li>
<li data-kit-state="uploaded"><span id="form-files-refused-bookings" data-kit-region="file-name"><span data-kit-region="head">bookings-2025</span><span data-kit-region="tail">.csv</span></span> <span>Uploaded</span> <button type="button" data-kit-role="secondary-action" aria-label="Remove bookings-2025.csv"><span data-kit-region="label">Remove</span></button></li>
</ul>
<span data-kit-region="help" id="form-files-refused-help">Accepts CSV and TSV files.</span>
</div>
<fieldset>
<div data-kit-role="form-group" data-kit-holds="help">
<label for="form-floor-plan">Floor plan</label>
<input id="form-floor-plan" name="floor-plan" type="file" accept=".pdf" aria-describedby="form-floor-plan-help">
<span data-kit-region="help" id="form-floor-plan-help">Accepts PDF files.</span>
</div>
<div data-kit-role="form-group" data-kit-holds="help">
<label for="form-hall-photo">Hall photo</label>
<input id="form-hall-photo" name="hall-photo" type="file" accept=".jpg,.jpeg,.png" aria-describedby="form-hall-photo-help">
<ul>
<li data-kit-state="refused"><span id="form-hall-photo-main-hall" data-kit-region="file-name"><span data-kit-region="head">main-hall</span><span data-kit-region="tail">.heic</span></span> <span>Refused</span> <span>HEIC images cannot be added.</span> <button type="button" data-kit-role="secondary-action" aria-label="Remove main-hall.heic"><span data-kit-region="label">Remove</span></button></li>
</ul>
<span data-kit-region="help" id="form-hall-photo-help">Accepts JPEG and PNG images.</span>
</div>
</fieldset>