kit

Selection control

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, List, Form, Stepped flow, Settings, Reports, Help

Selection control

Source
<div>
  <label><input type="hidden" name="include-invoices" value="false"><input data-kit-role="selection-control" type="checkbox" name="include-invoices"><span>I agree to the <a href="../role-redline/#role-redline">terms of hire</a></span><output>Not agreed</output></label>
</div>
<div>
  <label><input data-kit-role="selection-control" type="radio" name="report-delivery" value="email"><span>Email delivery</span><output>Not chosen</output></label>
</div>

Selection control, checked

Source
<div>
  <label><input type="hidden" name="include-payments" value="false"><input data-kit-role="selection-control" type="checkbox" name="include-payments" checked><span>I agree to the <a href="../role-redline/#role-redline">terms of hire</a></span><output>Agreed</output></label>
</div>
<div>
  <label><input data-kit-role="selection-control" type="radio" name="report-delivery-checked" value="email" checked><span>Email delivery</span><output>Chosen</output></label>
</div>

Selection control, mixed

Source
<div>
  <label><input data-kit-role="selection-control" type="checkbox" id="select-all-invoices" data-kit-state="mixed" checked><span>All invoices</span></label>
</div>
<div>
  <label><input data-kit-role="selection-control" type="checkbox" id="select-all-bookings" checked><span>All bookings</span></label>
</div>
<div>
  <label><input data-kit-role="selection-control" type="checkbox" id="select-all-rooms"><span>All rooms</span></label>
</div>

Selection control, disabled

Seat at the committee table
Source
<div>
  <label><input data-kit-role="selection-control" type="checkbox" name="disabled-rooms" value="garden" disabled><span>Garden room</span><output>Not chosen</output><span>Taken by Oakmere Choir until March</span></label>
</div>
<div>
  <label><input data-kit-role="selection-control" type="checkbox" name="disabled-rooms" value="hall" checked disabled><span>Main Hall</span><output>Chosen</output><span>No longer free on Tuesdays</span></label>
</div>
<fieldset data-kit-role="selection-control" data-kit-region="group" id="disabled-seats">
  <legend>Seat at the committee table</legend>
  <label><input data-kit-role="selection-control" type="radio" name="disabled-seats" value="chair"><span>Chair</span><output>Not chosen</output></label>
  <label><input data-kit-role="selection-control" type="radio" name="disabled-seats" value="treasurer" aria-describedby="disabled-seats-2-reason" disabled><span>Treasurer</span><output>Not chosen</output><span data-kit-region="reason" id="disabled-seats-2-reason" aria-hidden="true">Taken by Tom Reid</span></label>
</fieldset>

Selection control, group

You accept the terms of hire when you send this request.
Stop the old collection before starting a new one.
Report delivery Reports go out on the first of each month.
Weekdays this rule covers
Weekend days this rule covers
Levels
Bring soft shoes
Dancers see these levels when they book.
Attendance
Class reminders Dancers can change these in their own settings. Choose at least one reminder.
Source
<div>
  <div data-kit-role="selection-control" data-kit-region="group" id="request-terms">
    <input type="hidden" name="accept-terms" value="">
    <label><input data-kit-role="selection-control" type="checkbox" name="accept-terms" aria-describedby="request-terms-help"><span>I agree to the terms of hire</span><output>Not agreed</output></label>
    <span data-kit-region="help" id="request-terms-help">You accept the terms of hire when you send this request.</span>
  </div>
  <div data-kit-role="selection-control" data-kit-region="group" id="selection-wrap-choice">
    <input type="hidden" name="stop-old-collection" value="">
    <label><input data-kit-role="selection-control" type="checkbox" name="stop-old-collection"><span>I have set autopay in my current system to stop after its last collection</span><output>Not confirmed</output></label>
  </div>
  <div data-kit-role="selection-control" data-kit-region="group" id="selection-wrap-help">
    <input type="hidden" name="stop-old-collection-with-help" value="">
    <label><input data-kit-role="selection-control" type="checkbox" name="stop-old-collection-with-help" aria-describedby="selection-wrap-help-help"><span>I have set autopay in my current system to stop after its last collection</span><output>Not confirmed</output></label>
    <span data-kit-region="help" id="selection-wrap-help-help">Stop the old collection before starting a new one.</span>
  </div>
  <fieldset data-kit-role="selection-control" data-kit-region="group" id="report-delivery">
    <legend>Report delivery</legend>
    <label><input data-kit-role="selection-control" type="radio" name="report-delivery-group" value="email" aria-describedby="report-delivery-help" checked><span>Email</span><output>Chosen</output></label>
    <label><input data-kit-role="selection-control" type="radio" name="report-delivery-group" value="post" aria-describedby="report-delivery-help"><span>Post</span><output>Not chosen</output></label>
    <span data-kit-region="help" id="report-delivery-help">Reports go out on the first of each month.</span>
  </fieldset>
  <fieldset data-kit-role="selection-control" data-kit-region="group" id="rule-days">
    <legend>Weekdays this rule covers</legend>
    <input type="hidden" name="rule-days" value="">
    <label data-kit-region="heading"><input data-kit-role="selection-control" type="checkbox" id="rule-days-heading" data-kit-state="mixed" checked>All weekdays</label>
    <label><input data-kit-role="selection-control" type="checkbox" name="rule-days" value="monday" checked><span>Monday</span><output>Covered</output></label>
    <label><input data-kit-role="selection-control" type="checkbox" name="rule-days" value="tuesday"><span>Tuesday</span><output>Not covered</output></label>
    <label><input data-kit-role="selection-control" type="checkbox" name="rule-days" value="wednesday" checked><span>Wednesday</span><output>Covered</output></label>
    <label><input data-kit-role="selection-control" type="checkbox" name="rule-days" value="thursday"><span>Thursday</span><output>Not covered</output></label>
    <label><input data-kit-role="selection-control" type="checkbox" name="rule-days" value="friday"><span>Friday</span><output>Not covered</output></label>
  </fieldset>
  <fieldset data-kit-role="selection-control" data-kit-region="group" id="rule-weekend">
    <legend>Weekend days this rule covers</legend>
    <input type="hidden" name="rule-weekend" value="">
    <label data-kit-region="heading"><input data-kit-role="selection-control" type="checkbox" id="rule-weekend-heading" disabled>All weekend days</label>
    <label><input data-kit-role="selection-control" type="checkbox" name="rule-weekend" value="saturday" aria-describedby="rule-weekend-1-reason" checked disabled><span>Saturday</span><output>Covered</output><span data-kit-region="reason" id="rule-weekend-1-reason" aria-hidden="true">Set by the opening hours</span></label>
    <label><input data-kit-role="selection-control" type="checkbox" name="rule-weekend" value="sunday" aria-describedby="rule-weekend-2-reason" disabled><span>Sunday</span><output>Not covered</output><span data-kit-region="reason" id="rule-weekend-2-reason" aria-hidden="true">Closed on Sundays</span></label>
  </fieldset>
  <fieldset data-kit-role="selection-control" data-kit-region="group" id="class-levels">
    <legend>Levels</legend>
    <label><input data-kit-role="selection-control" type="radio" name="class-levels" value="all" aria-describedby="class-levels-help"><span>All levels</span><output>Not chosen</output></label>
    <label><input data-kit-role="selection-control" type="radio" name="class-levels" value="named" aria-controls="class-levels-named-fields" aria-describedby="class-levels-help" checked><span>Named levels</span><output>Chosen</output></label>
    <div data-kit-region="choice-fields" id="class-levels-named-fields">
      <div data-kit-role="selection-control" data-kit-region="group" id="class-levels-named">
        <input type="hidden" name="class-level-names" value="">
        <label><input data-kit-role="selection-control" type="checkbox" name="class-level-names" value="beginner" checked><span>Beginner</span><output>Included</output></label>
        <label><input data-kit-role="selection-control" type="checkbox" name="class-level-names" value="intermediate" checked><span>Intermediate</span><output>Included</output></label>
        <label><input data-kit-role="selection-control" type="checkbox" name="class-level-names" value="advanced"><span>Advanced</span><output>Not included</output></label>
      </div>
    </div>
    <label><input data-kit-role="selection-control" type="radio" name="class-levels" value="audition" aria-controls="class-levels-audition-fields" aria-describedby="class-levels-help"><span>By audition</span><output>Not chosen</output></label>
    <div data-kit-region="choice-fields" id="class-levels-audition-fields">
      <div data-kit-role="form-group" data-kit-width="wide">
        <label for="class-levels-audition-note">Audition note</label>
        <input id="class-levels-audition-note" name="audition-note" value="Bring soft shoes">
        <output for="class-levels-audition-note">Bring soft shoes</output>
      </div>
    </div>
    <span data-kit-region="help" id="class-levels-help">Dancers see these levels when they book.</span>
  </fieldset>
  <fieldset data-kit-role="selection-control" data-kit-region="group" id="attendance">
    <legend>Attendance</legend>
    <input type="hidden" name="attendance[]" value="">
    <label><input data-kit-role="selection-control" type="checkbox" name="attendance[]" value="late" aria-controls="attendance-late-fields"><span>Late arrival</span><output>Not chosen</output></label>
    <div data-kit-region="choice-fields" id="attendance-late-fields">
      <div data-kit-role="form-group" id="attendance-arrived-at">
        <label for="attendance-arrived-at-control" id="attendance-arrived-at-label">Arrived at</label>
        <div data-kit-role="time-field" id="attendance-arrived-at-control-time-field" data-kit-dates='{"locale":"en-GB","step":15,"zone":"Europe/London"}'>
          <input id="attendance-arrived-at-control" type="text" autocomplete="off" value="19:15" aria-describedby="attendance-arrived-at-control-resolved" aria-expanded="false" aria-controls="attendance-arrived-at-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="attendance-arrived-at-control-resolved" data-kit-region="resolved" aria-live="polite"></span>
          <button type="button" data-kit-role="icon-action" data-kit-region="times" id="attendance-arrived-at-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="arrived_at" value="19:15">
          <div id="attendance-arrived-at-control-times-list" data-kit-role="popover" data-kit-region="times-list" popover="manual" role="listbox" aria-label="Times"></div>
        </div>
        <output for="attendance-arrived-at-control"><time datetime="19:15">19:15</time></output>
      </div>
    </div>
    <label><input data-kit-role="selection-control" type="checkbox" name="attendance[]" value="early" aria-controls="attendance-early-fields"><span>Early departure</span><output>Not chosen</output></label>
    <div data-kit-region="choice-fields" id="attendance-early-fields">
      <div data-kit-role="form-group" id="attendance-left-at">
        <label for="attendance-left-at-control" id="attendance-left-at-label">Left at</label>
        <div data-kit-role="time-field" id="attendance-left-at-control-time-field" data-kit-dates='{"locale":"en-GB","step":15,"zone":"Europe/London"}'>
          <input id="attendance-left-at-control" type="text" autocomplete="off" value="20:30" aria-describedby="attendance-left-at-control-resolved" aria-expanded="false" aria-controls="attendance-left-at-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="attendance-left-at-control-resolved" data-kit-region="resolved" aria-live="polite"></span>
          <button type="button" data-kit-role="icon-action" data-kit-region="times" id="attendance-left-at-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="left_at" value="20:30">
          <div id="attendance-left-at-control-times-list" data-kit-role="popover" data-kit-region="times-list" popover="manual" role="listbox" aria-label="Times"></div>
        </div>
        <output for="attendance-left-at-control"><time datetime="20:30">20:30</time></output>
      </div>
    </div>
  </fieldset>
  <fieldset data-kit-role="selection-control" data-kit-region="group" id="class-reminders" data-kit-state="error">
    <legend>Class reminders</legend>
    <input type="hidden" name="class-reminders" value="">
    <label><input data-kit-role="selection-control" type="checkbox" name="class-reminders" value="email" aria-describedby="class-reminders-1-help class-reminders-help class-reminders-error" aria-invalid="true"><span>Email</span><output>Not chosen</output><span data-kit-region="choice-help" id="class-reminders-1-help" aria-hidden="true">Sent the evening before each class.</span></label>
    <label><input data-kit-role="selection-control" type="checkbox" name="class-reminders" value="text" aria-describedby="class-reminders-2-reason class-reminders-2-help class-reminders-help class-reminders-error" aria-invalid="true" disabled><span>Text message</span><output>Not chosen</output><span data-kit-region="reason" id="class-reminders-2-reason" aria-hidden="true">Add a mobile number to get texts.</span><span data-kit-region="choice-help" id="class-reminders-2-help" aria-hidden="true">Sent two hours before each class.</span></label>
    <span data-kit-region="help" id="class-reminders-help">Dancers can change these in their own settings.</span>
    <span data-kit-region="error" id="class-reminders-error">Choose at least one reminder.</span>
  </fieldset>
</div>

Selection control, group error

You accept the terms of hire when you send this request. Accept the terms of hire before you send your request.
Accept the terms of hire before you send your request.
Report delivery Reports go out on the first of each month. Choose how your reports reach you.
Source
<div>
  <div data-kit-role="selection-control" data-kit-region="group" id="request-terms-unaccepted" data-kit-state="error">
    <input type="hidden" name="accept-terms-unaccepted" value="">
    <label><input data-kit-role="selection-control" type="checkbox" name="accept-terms-unaccepted" aria-describedby="request-terms-unaccepted-help request-terms-unaccepted-error" aria-invalid="true"><span>I agree to the terms of hire</span><output>Not agreed</output></label>
    <span data-kit-region="help" id="request-terms-unaccepted-help">You accept the terms of hire when you send this request.</span>
    <span data-kit-region="error" id="request-terms-unaccepted-error">Accept the terms of hire before you send your request.</span>
  </div>
  <div data-kit-role="selection-control" data-kit-region="group" id="request-terms-error-only" data-kit-state="error">
    <input type="hidden" name="accept-terms-error-only" value="">
    <label><input data-kit-role="selection-control" type="checkbox" name="accept-terms-error-only" aria-describedby="request-terms-error-only-error" aria-invalid="true"><span>I agree to the terms of hire</span><output>Not agreed</output></label>
    <span data-kit-region="error" id="request-terms-error-only-error">Accept the terms of hire before you send your request.</span>
  </div>
  <fieldset data-kit-role="selection-control" data-kit-region="group" id="report-delivery-unchosen" data-kit-state="error">
    <legend>Report delivery</legend>
    <label><input data-kit-role="selection-control" type="radio" name="report-delivery-unchosen" value="email" aria-describedby="report-delivery-unchosen-help report-delivery-unchosen-error" aria-invalid="true"><span>Email</span><output>Not chosen</output></label>
    <label><input data-kit-role="selection-control" type="radio" name="report-delivery-unchosen" value="post" aria-describedby="report-delivery-unchosen-help report-delivery-unchosen-error" aria-invalid="true"><span>Post</span><output>Not chosen</output></label>
    <span data-kit-region="help" id="report-delivery-unchosen-help">Reports go out on the first of each month.</span>
    <span data-kit-region="error" id="report-delivery-unchosen-error">Choose how your reports reach you.</span>
  </fieldset>
</div>