Monsoon v0.2.0
Made by Alexandre Kohler Star

Two factor and sign in

Verify screen

The second step after the password: masked destination, code cells that submit when complete, a resend link with a countdown, another method link and a "Don't ask again on this device for 30 days" checkbox. Needs monsoon.js for the cells and the countdown.

Two factor and sign in8 classesNeeds monsoon.jsLight and dark

Needs monsoon.js. The styles work on their own, and the behavior comes from the optional interactive layer: add <script src="https://cdn.jsdelivr.net/npm/monsooncss/dist/monsoon.js" defer></script> or import 'monsooncss/js'. See the interactive layer.

Example

Full

JavaScript API

Attribute

data-m-auth-resend

Options

OptionDescription
data-m-auth-resend-seconds="30"
data-m-auth-resend-idle (starts enabled, counts after the first click)
data-m-auth-resend-done="You can request a new code now." (announced at zero)

Methods

MethodDescription
Monsoon.authResend(el).remaining
Monsoon.authResend(el).start(60)
Monsoon.authResend(el).stop()

Events

EventDescription
monsoon:auth-resend { seconds } (cancelable: preventDefault() keeps it enabled)
monsoon:auth-resend-ready
monsoon:otp-complete { code }

Classes

8 classes. Click a name to copy it. Utilities on the same element always win over component defaults, so any of them can be adjusted with plain utility classes.

ClassTypeWhat it does
Part Part of the verify screen. On a <form> in the example. Sets grid display, gap, width, padding, text color and background, and 4 custom properties.
CSS
.auth-card {
  --tone: var(--primary);
  --tone-fg: var(--primary-foreground);
  --auth-pad: clamp(1.25rem, 5vw, 2rem);
  --auth-radius: var(--m-radius-3xl);
  display: grid;
  gap: 1.5rem;
  width: 100%;
  max-width: 26rem;
  padding: var(--auth-pad);
  color: var(--foreground);
  background-color: var(--surface);
  border: var(--m-border-width) solid var(--border);
  border-radius: var(--auth-radius);
  box-shadow: var(--m-shadow-lg);
}
Part Part of the verify screen. On a <header> in the example. Sets grid display, alignment, gap and text style.
CSS
.auth-header {
  display: grid;
  justify-items: center;
  gap: .5rem;
  text-align: center;
}
Part Part of the verify screen. On a <span> in the example. Sets grid display, alignment, width, height, margin and text color, and --tone.
CSS
.auth-icon > svg {
  width: 1.5rem;
  height: 1.5rem;
}

.auth-icon {
  --tone: var(--primary);
  display: grid;
  place-items: center;
  flex: none;
  width: 3rem;
  height: 3rem;
  margin-block-end: .25rem;
  color: var(--tone);
  background-color: color-mix(in oklab, var(--tone) 11%, var(--surface));
  border-radius: var(--m-radius-2xl);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--tone) 22%, transparent), 0 1px 2px color-mix(in oklab, var(--tone) 18%, transparent);
}
Part Part of the verify screen. On a <h2> in the example. Sets margin, text size, font weight and text style.
CSS
.auth-title {
  margin: 0;
  font-size: 1.375rem;
  font-weight: 650;
  line-height: 1.25;
  letter-spacing: -.015em;
  text-wrap: balance;
}
Part Part of the verify screen. On a <p> in the example. Sets width, margin, text size, text style and text color.
CSS
.auth-description {
  max-width: 44ch;
  margin: 0;
  font-size: .9375rem;
  line-height: 1.55;
  color: var(--muted-foreground);
  text-wrap: pretty;
}

.auth-header-start > .auth-description {
  max-width: 60ch;
}
Part Part of the verify screen. On a <span> in the example. Sets font weight, text color and text style.
CSS
.auth-destination {
  font-weight: 600;
  color: var(--foreground);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
Base Base class of the verify screen. On a <div> in the example. Sets flex display, alignment, gap, margin, text size and text color.
CSS
.auth-alt :disabled, .auth-alt [aria-disabled=true] {
  color: var(--muted-foreground);
  text-decoration: none;
  cursor: not-allowed;
}

.auth-alt {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: .375rem 1rem;
  margin: 0;
  font-size: .875rem;
  color: var(--muted-foreground);
}
Part Part of the verify screen. Not used in the example above. Sets margin.
CSS
.auth-countdown {
  margin-inline-start: .3em;
  font-variant-numeric: tabular-nums;
}

Usage

The styles ship inside the same stylesheet as the utilities, and the behavior comes from the optional monsoon.js script, which enhances any element with a matching data-m attribute, including markup added later.

index.html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/monsooncss">
<script src="https://cdn.jsdelivr.net/npm/monsooncss/dist/monsoon.js" defer></script>

<!-- Verify screen: start from the base class, then add modifiers -->
<form class="auth-card" action="#" onsubmit="event.preventDefault()">
  <header class="auth-header">
    <span class="auth-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4.5 5.5h15a1 1 0 0 1 1 1V16a1 1 0 0 1-1 1H9l-4.5 3.5V6.5a1 1 0 0 1 1-1z"/><path d="M8.5 11.25h.01M12 11.25h.01M15.5 11.25h.01" stroke-width="2.4"/></svg></span>
    <h2 class="auth-title">Enter the code we texted you</h2>
    <p class="auth-description">We sent a 6 digit code to <span class="auth-destination">+55 •• •••••-0474</span>. It expires in 10 minutes.</p>
  </header>
  <div class="otp mx-auto" data-m-otp data-m-otp-separator="3" data-m-otp-autosubmit>
  <input class="otp-field" name="code" maxlength="6" inputmode="numeric" autocomplete="one-time-code" aria-label="Verification code">
</div>
  <label class="flex items-start gap-2.5 text-sm">
    <input type="checkbox" class="checkbox checkbox-sm mt-0.5" name="trust_device" checked>
    <span>Don't ask again on this device for 30 days</span>
  </label>
  <button class="btn btn-primary btn-block">Verify</button>
<!-- the full example is in the Code tab above -->

Theme it with --seed on any ancestor, for example style="--seed: #0d9488", and force a scheme with class="dark" or class="light" on a wrapper.

Accessibility

  • Give every control a visible label linked with for, or an aria-label when the purpose is obvious from context. Link help and error text with aria-describedby; invalid styles use :user-invalid, so they appear only after the user interacts.
  • Checkboxes and radios stay real inputs, so they keep native keyboard behavior (Space toggles, arrow keys move within a radio group) and form submission.
  • Use button for actions and a for navigation. Icon only buttons need an aria-label; decorative icons carry aria-hidden="true".
  • Every interactive part shows a visible focus ring with :focus-visible, and tone colors pair with -foreground tokens that keep text at 4.5:1 or better in light and dark mode.
Two factor and sign inQR codeA QR code generated in the browser (byte mode, error correction level M, versions 1 to 10, up to 213 bytes) as a crisp SVG. Dark modules stay on a light tile in dark mode too, so every camera can read it. Three sizes. Needs monsoon.js.Data display and layoutMockup codeA terminal style code frame where each pre line can take a data-prefix.Data display and layoutCode blockA code listing with a header for the file name.Two factor and sign inRecovery codesOne time recovery codes in a two column grid with copy all, download as a .txt file and print. Used codes are struck through, and Continue stays disabled until "I saved these codes" is checked. Needs monsoon.js for the actions.

No recent searches

Try , , or .

Recent

Loading the search index

No results for ""

Check the spelling, or search a class name such as px-4.