kit

Ways in

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.

Ways in

or

Your workspace opens straight away.

No email given

Email opened
or

Your workspace opens straight away.

No email given

Mobile number leads
07700 900123

or

Your workspace opens straight away.

Google refused
or

Your workspace opens straight away.

No email given

Without a way
or

Your workspace opens straight away.

Without a surrounding form
or

Your workspace opens straight away.

Source
<form data-kit-layout="form" action="#role-ways-in" method="get">
  <div data-kit-region="notices" aria-live="polite"></div>
  <button type="submit" name="way" value="email" hidden></button>
  <div data-kit-role="ways-in" id="role-ways-in-ways">
    <div data-kit-region="google"><button type="submit" formnovalidate name="way" value="google" data-kit-role="primary-action"><span data-kit-region="label">Continue with Google</span></button></div>
    <div data-kit-region="rule"><span>or</span></div>
    <div data-kit-region="others">
      <button type="button" data-kit-role="secondary-action" data-kit-region="way"><span data-kit-region="label">Continue with email</span></button>
      <button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Continue with Microsoft</span></button>
    </div>
    <p>Your workspace opens straight away.</p>
  </div>
  <div data-kit-region="form-groups">
    <div data-kit-region="notices" aria-live="polite"></div>
    <div data-kit-role="form-group"><label for="role-ways-in-email">Email</label><input id="role-ways-in-email" name="email" type="email" required autocomplete="email" /><output for="role-ways-in-email">No email given</output></div>
  </div>
  <div data-kit-region="form-groups" data-kit-ways="all">
    <div data-kit-role="selection-control" data-kit-region="group" id="role-ways-in-remember">
      <input type="hidden" name="remember" value="">
      <label><input data-kit-role="selection-control" type="checkbox" name="remember" value="true">Remember me for 30 days</label>
    </div>
  </div>
  <div data-kit-role="action-group" data-kit-region="submit-return"><button type="submit" name="way" value="email" data-kit-role="primary-action"><span data-kit-region="label">Continue with email</span></button><p data-kit-role="status-line" role="status" aria-live="polite"></p></div>
</form>
<form data-kit-layout="form" action="#role-ways-in" method="get">
  <div data-kit-region="notices" aria-live="polite"></div>
  <button type="submit" name="way" value="email" hidden></button>
  <div data-kit-role="ways-in" id="role-ways-in-opened">
    <div data-kit-region="google"><button type="submit" formnovalidate name="way" value="google" data-kit-role="secondary-action"><span data-kit-region="label">Continue with Google</span></button></div>
    <div data-kit-region="rule"><span>or</span></div>
    <div data-kit-region="others">
      <button type="button" data-kit-role="secondary-action" data-kit-region="way" hidden><span data-kit-region="label">Continue with email</span></button>
      <button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Continue with Microsoft</span></button>
    </div>
    <p>Your workspace opens straight away.</p>
  </div>
  <div data-kit-region="form-groups">
    <div data-kit-region="notices" aria-live="polite"></div>
    <div data-kit-role="form-group"><label for="role-ways-in-opened-email">Email</label><input id="role-ways-in-opened-email" name="email" type="email" required autocomplete="email" /><output for="role-ways-in-opened-email">No email given</output></div>
  </div>
  <div data-kit-region="form-groups" data-kit-ways="all">
    <div data-kit-role="selection-control" data-kit-region="group" id="role-ways-in-opened-remember">
      <input type="hidden" name="remember" value="">
      <label><input data-kit-role="selection-control" type="checkbox" name="remember" value="true">Remember me for 30 days</label>
    </div>
  </div>
  <div data-kit-role="action-group" data-kit-region="submit-return"><button type="submit" name="way" value="email" data-kit-role="primary-action"><span data-kit-region="label">Continue with email</span></button><p data-kit-role="status-line" role="status" aria-live="polite"></p></div>
</form>
<form data-kit-layout="form" action="#role-ways-in" method="get">
  <div data-kit-region="notices" aria-live="polite"></div>
  <button type="submit" name="way" value="mobile" hidden></button>
  <div data-kit-region="form-groups">
    <div data-kit-region="notices" aria-live="polite"></div>
    <div data-kit-role="form-group"><label for="role-ways-in-leads-mobile">Mobile number</label><input id="role-ways-in-leads-mobile" name="mobile" type="tel" required autocomplete="tel" value="07700 900123" /><output for="role-ways-in-leads-mobile">07700 900123</output></div>
  </div>
  <div data-kit-region="form-groups" data-kit-ways="all">
    <div data-kit-role="selection-control" data-kit-region="group" id="role-ways-in-leads-remember">
      <input type="hidden" name="remember" value="">
      <label><input data-kit-role="selection-control" type="checkbox" name="remember" value="true">Remember me for 30 days</label>
    </div>
  </div>
  <div data-kit-role="action-group" data-kit-region="submit-return"><button type="submit" name="way" value="mobile" data-kit-role="primary-action"><span data-kit-region="label">Send code</span></button><p data-kit-role="status-line" role="status" aria-live="polite"></p></div>
  <div data-kit-role="ways-in" id="role-ways-in-leads">
    <div data-kit-region="rule"><span>or</span></div>
    <div data-kit-region="google"><button type="submit" formnovalidate name="way" value="google" data-kit-role="secondary-action"><span data-kit-region="label">Continue with Google</span></button></div>
    <div data-kit-region="others">
      <button type="button" data-kit-role="secondary-action" data-kit-region="way" hidden><span data-kit-region="label">Continue with mobile number</span></button>
      <button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Continue with Microsoft</span></button>
    </div>
    <p>Your workspace opens straight away.</p>
  </div>
</form>
<form data-kit-layout="form" action="#role-ways-in" method="get">
  <div data-kit-region="notices" aria-live="polite"></div>
  <button type="submit" name="way" value="email" hidden></button>
  <div data-kit-role="refusal" id="role-ways-in-refused-refusal" role="alert" aria-atomic="true"><p data-kit-region="line">Signing in with Google did not finish: Google did not confirm your account. Try again, or continue with email.</p></div>
  <div data-kit-role="ways-in" id="role-ways-in-refused">
    <div data-kit-region="google"><button type="submit" formnovalidate name="way" value="google" data-kit-role="primary-action"><span data-kit-region="label">Continue with Google</span></button></div>
    <div data-kit-region="rule"><span>or</span></div>
    <div data-kit-region="others">
      <button type="button" data-kit-role="secondary-action" data-kit-region="way"><span data-kit-region="label">Continue with email</span></button>
      <button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Continue with Microsoft</span></button>
    </div>
    <p>Your workspace opens straight away.</p>
  </div>
  <div data-kit-region="form-groups">
    <div data-kit-region="notices" aria-live="polite"></div>
    <div data-kit-role="form-group"><label for="role-ways-in-refused-email">Email</label><input id="role-ways-in-refused-email" name="email" type="email" required autocomplete="email" /><output for="role-ways-in-refused-email">No email given</output></div>
  </div>
  <div data-kit-region="form-groups" data-kit-ways="all">
    <div data-kit-role="selection-control" data-kit-region="group" id="role-ways-in-refused-remember">
      <input type="hidden" name="remember" value="">
      <label><input data-kit-role="selection-control" type="checkbox" name="remember" value="true">Remember me for 30 days</label>
    </div>
  </div>
  <div data-kit-role="action-group" data-kit-region="submit-return"><button type="submit" name="way" value="email" data-kit-role="primary-action"><span data-kit-region="label">Continue with email</span></button><p data-kit-role="status-line" role="status" aria-live="polite"></p></div>
</form>
<form action="#role-ways-in" method="get">
  <div data-kit-role="ways-in">
    <div data-kit-region="google"><button type="submit" formnovalidate name="way" value="google" data-kit-role="primary-action"><span data-kit-region="label">Continue with Google</span></button></div>
    <div data-kit-region="rule"><span>or</span></div>
    <div data-kit-region="others"><button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Continue with Microsoft</span></button></div>
    <p>Your workspace opens straight away.</p>
  </div>
</form>
<form id="role-ways-in-receiver" action="#role-ways-in" method="get"></form>
<div data-kit-role="ways-in">
  <div data-kit-region="google"><button type="submit" formnovalidate form="role-ways-in-receiver" name="way" value="google" data-kit-role="primary-action"><span data-kit-region="label">Continue with Google</span></button></div>
  <div data-kit-region="rule"><span>or</span></div>
  <div data-kit-region="others"><button type="button" data-kit-role="secondary-action"><span data-kit-region="label">Continue with Microsoft</span></button></div>
  <p>Your workspace opens straight away.</p>
</div>

Ways in, inert

Google sign-in is not ready yet.

or

Email sign-in is not ready yet.

Microsoft sign-in is not ready yet.

Your workspace opens straight away.

No email given

Source
<form data-kit-layout="form" action="#role-ways-in" method="get">
  <div data-kit-region="notices" aria-live="polite"></div>
  <button type="submit" hidden></button>
  <div data-kit-role="ways-in" id="role-ways-in-inert-ways">
    <div data-kit-region="google">
      <button type="submit" formnovalidate id="ways-in-google" data-kit-role="primary-action" data-kit-state="inert" disabled aria-describedby="ways-in-google-words"><span data-kit-region="label">Continue with Google</span></button>
      <p data-kit-region="words" id="ways-in-google-words">Google sign-in is not ready yet.</p>
    </div>
    <div data-kit-region="rule"><span>or</span></div>
    <div data-kit-region="others">
      <button type="button" id="ways-in-email" data-kit-role="secondary-action" data-kit-region="way" data-kit-state="inert" disabled aria-describedby="ways-in-email-words"><span data-kit-region="label">Continue with email</span></button>
      <p data-kit-region="words" id="ways-in-email-words">Email sign-in is not ready yet.</p>
      <button type="button" id="ways-in-microsoft" data-kit-role="secondary-action" data-kit-state="inert" disabled aria-describedby="ways-in-microsoft-words"><span data-kit-region="label">Continue with Microsoft</span></button>
      <p data-kit-region="words" id="ways-in-microsoft-words">Microsoft sign-in is not ready yet.</p>
    </div>
    <p>Your workspace opens straight away.</p>
  </div>
  <div data-kit-region="form-groups">
    <div data-kit-region="notices" aria-live="polite"></div>
    <div data-kit-role="form-group"><label for="role-ways-in-inert-email">Email</label><input id="role-ways-in-inert-email" name="email" type="email" autocomplete="email" /><output for="role-ways-in-inert-email">No email given</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">Continue with email</span></button><p data-kit-role="status-line" role="status" aria-live="polite"></p></div>
</form>