Label panel

On Shell, Record, Find, Help

Amount due

£240.00

One Secondary action follows the words.

Changed elsewhere

Someone else changed this invoice while it was open

Each action is a form of its own.

Plan

Form groups stand before the Primary action.

Caretaker for Saturday

Who opens the hall Maya Osei

Arriving

08:30

One group of actions, stacking at Phone.

Room upkeep

Source

<section data-kit-role="label-panel" aria-label="Amount due">
  <h3>Amount due</h3>
  <span data-kit-role="amount">£240.00</span>
</section>
<p class="specimen-case-line">One Secondary action follows the words.</p>
<section data-kit-role="label-panel" aria-label="Changed elsewhere">
  <h3>Changed elsewhere</h3>
  <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">Someone else changed this invoice while it was open</p>
    <div data-kit-region="action"><button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Reload the invoice</span></button></div>
  </div>
</section>
<p class="specimen-case-line">Each action is a form of its own.</p>
<section data-kit-role="label-panel" aria-label="Plan">
  <h3>Plan</h3>
  <div data-kit-role="action-group">
    <form action="?plan=change" method="get"><button type="submit" data-kit-role="secondary-action"><span data-kit-region="label">Change the plan</span></button></form>
    <form action="?plan=end" method="get"><button type="submit" data-kit-role="secondary-action"><span data-kit-region="label">End the plan</span></button></form>
  </div>
</section>
<p class="specimen-case-line">Form groups stand before the Primary action.</p>
<section data-kit-role="label-panel" aria-labelledby="label-panel-caretaker">
  <h3 id="label-panel-caretaker">Caretaker for Saturday</h3>
  <div data-kit-role="form-group" data-kit-width="medium">
    <label for="label-panel-caretaker-name">Who opens the hall</label>
    <input id="label-panel-caretaker-name" name="caretaker" value="Maya Osei">
    <output for="label-panel-caretaker-name">Maya Osei</output>
  </div>
  <div data-kit-role="form-group" id="label-panel-caretaker-arrives">
    <label for="label-panel-caretaker-arrives-control" id="label-panel-caretaker-arrives-label">Arriving</label>
    <div data-kit-role="time-field" id="label-panel-caretaker-arrives-control-time-field" data-kit-dates='{"locale":"en-GB","step":15,"zone":"Europe/London"}'>
      <input id="label-panel-caretaker-arrives-control" type="text" autocomplete="off" value="08:30" aria-describedby="label-panel-caretaker-arrives-control-resolved" aria-expanded="false" aria-controls="label-panel-caretaker-arrives-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="label-panel-caretaker-arrives-control-resolved" data-kit-region="resolved" aria-live="polite"></span>
      <button type="button" data-kit-role="icon-action" data-kit-region="times" id="label-panel-caretaker-arrives-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="arrives" value="08:30">
      <div id="label-panel-caretaker-arrives-control-times-list" data-kit-role="popover" data-kit-region="times-list" popover="manual" role="listbox" aria-label="Times"></div>
    </div>
    <output for="label-panel-caretaker-arrives-control"><time datetime="08:30">08:30</time></output>
  </div>
  <div data-kit-role="action-group">
    <button type="button" data-kit-role="primary-action"><span data-kit-region="label">Save the caretaker</span></button>
  </div>
</section>
<p class="specimen-case-line">One group of actions, stacking at Phone.</p>
<section data-kit-role="label-panel" aria-label="Room upkeep" data-kit-print-omission="Room upkeep is not included in this printout.">
  <h3>Room upkeep</h3>
  <div data-kit-role="action-group">
    <button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Block out a room</span></button>
    <button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Note a fault</span></button>
    <button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Book a repair visit</span></button>
    <button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Send reminders</span></button>
  </div>
</section>

Label panel, unsaved

A form reopened holding the entry kept on this device.