kit

Switch

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.

Switch

On Off Off An email each Monday with the week's changes.
On Off On A dot beside your name while you have the app open.
On Off Off A reminder the day before. Add a mobile number to your account to turn this on.
On Off On Your organiser has turned this on for everyone. Teammates see the time, not the details.
Source
<div data-kit-role="form-group" data-kit-holds="help" id="switch-summary">
  <label for="switch-summary-control" id="switch-summary-label">Weekly summary</label>
  <span data-kit-role="switch">
    <input type="hidden" name="summary" value="false">
    <input id="switch-summary-control" type="checkbox" role="switch" name="summary" aria-describedby="switch-summary-help">
    <span data-kit-region="on">On</span>
    <span data-kit-region="off">Off</span>
  </span>
  <output for="switch-summary-control">Off</output>
  <span data-kit-region="help" id="switch-summary-help">An email each Monday with the week's changes.</span>
</div>
<div data-kit-role="form-group" data-kit-holds="help" id="switch-online">
  <label for="switch-online-control" id="switch-online-label">Show when I'm online</label>
  <span data-kit-role="switch">
    <input type="hidden" name="online" value="false">
    <input id="switch-online-control" type="checkbox" role="switch" name="online" checked aria-describedby="switch-online-help">
    <span data-kit-region="on">On</span>
    <span data-kit-region="off">Off</span>
  </span>
  <output for="switch-online-control">On</output>
  <span data-kit-region="help" id="switch-online-help">A dot beside your name while you have the app open.</span>
</div>
<div data-kit-role="form-group" data-kit-holds="help" data-kit-state="error" id="switch-texts">
  <label for="switch-texts-control" id="switch-texts-label">Text me before each booking</label>
  <span data-kit-role="switch">
    <input type="hidden" name="texts" value="false">
    <input id="switch-texts-control" type="checkbox" role="switch" name="texts" aria-describedby="switch-texts-help switch-texts-error" aria-invalid="true">
    <span data-kit-region="on">On</span>
    <span data-kit-region="off">Off</span>
  </span>
  <output for="switch-texts-control">Off</output>
  <span data-kit-region="help" id="switch-texts-help">A reminder the day before.</span>
  <span data-kit-region="error" id="switch-texts-error">Add a mobile number to your account to turn this on.</span>
</div>
<div data-kit-role="form-group" data-kit-holds="help" id="switch-calendar">
  <label for="switch-calendar-control" id="switch-calendar-label">Share my bookings with the team calendar</label>
  <span data-kit-role="switch">
    <input type="hidden" name="calendar" value="false" disabled>
    <input id="switch-calendar-control" type="checkbox" role="switch" name="calendar" checked disabled aria-describedby="switch-calendar-help">
    <span data-kit-region="on">On</span>
    <span data-kit-region="off">Off</span>
  </span>
  <output for="switch-calendar-control">On</output>
  <span>Your organiser has turned this on for everyone.</span>
  <span data-kit-region="help" id="switch-calendar-help">Teammates see the time, not the details.</span>
</div>

Switch, processing

On Off Turning on… On An email each Monday with the week's changes.
Source
<div data-kit-role="form-group" data-kit-holds="help" id="switch-processing-summary">
  <label for="switch-processing-summary-control" id="switch-processing-summary-label">Weekly summary</label>
  <span data-kit-role="switch" data-kit-state="processing">
    <input type="hidden" name="summary" value="false">
    <input id="switch-processing-summary-control" type="checkbox" role="switch" name="summary" checked aria-describedby="switch-processing-summary-help" aria-busy="true">
    <span data-kit-region="on">On</span>
    <span data-kit-region="off">Off</span>
    <span data-kit-region="processing">Turning on…</span>
  </span>
  <output for="switch-processing-summary-control">On</output>
  <span data-kit-region="help" id="switch-processing-summary-help">An email each Monday with the week's changes.</span>
</div>