Monsoon v0.2.0
Made by Alexandre Kohler Star

Two factor and sign in

Method picker

Second factor choices as selectable cards on native radio inputs: icon, title, a short explanation, a Recommended badge and when it was last used. Arrow keys move between methods; unavailable methods can be disabled.

Two factor and sign in7 classesNo JavaScriptLight and dark

Example

Full

Classes

7 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 method picker. On a <fieldset> in the example. Sets grid display, gap, width, margin, padding and border, and --tone.
CSS
.auth-methods {
  --tone: var(--primary);
  display: grid;
  gap: .625rem;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
Base Base class of the method picker. On a <label> in the example. Sets grid display, grid tracks, alignment, gap, padding and background.
CSS
.auth-method > input:focus-visible {
  outline: 0;
}

.auth-method:has(> input:disabled) > input {
  cursor: not-allowed;
}
Part Part of the method picker. On a <span> in the example. Sets grid display, alignment, width, height, text color and background.
CSS
.auth-method-icon > svg {
  width: 1.25rem;
  height: 1.25rem;
}

.auth-method-icon {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  color: var(--muted-foreground);
  background-color: var(--surface-2);
  border-radius: var(--m-radius-lg);
  transition: color var(--m-duration-fast), background-color var(--m-duration-fast);
}
Part Part of the method picker. On a <span> in the example. Sets grid display, gap and width.
CSS
.auth-method-body {
  display: grid;
  gap: .125rem;
  min-width: 0;
}
Part Part of the method picker. On a <span> in the example. Sets flex display, alignment, gap, text size, font weight and text style.
CSS
.auth-method-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .25rem .5rem;
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1.35;
}
Part Part of the method picker. On a <span> in the example. Sets text size, text style and text color.
CSS
.auth-method-text {
  font-size: .8125rem;
  line-height: 1.4;
  color: var(--muted-foreground);
}
Part Part of the method picker. On a <span> in the example. Sets inline-flex display, alignment, gap, margin, text size and text color.
CSS
.auth-method-meta::before {
  content: "";
  width: .375rem;
  height: .375rem;
  background-color: var(--success);
  border-radius: var(--m-radius-full);
}

.auth-method-meta {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  margin-top: .125rem;
  font-size: .75rem;
  color: color-mix(in oklab, var(--muted-foreground) 85%, var(--foreground));
}

Usage

Components ship inside the same stylesheet as the utilities. There is nothing else to install and no script to load: link Monsoon and write the markup.

index.html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/monsooncss">

<!-- Method picker: start from the base class, then add modifiers -->
<form class="auth-card auth-card-wide" action="#" onsubmit="event.preventDefault()">
  <header class="auth-header auth-header-start">
    <h2 class="auth-title">Choose how to verify</h2>
    <p class="auth-description">Pick a second step for signing in to you@example.com.</p>
  </header>
  <fieldset class="auth-methods">
    <legend class="sr-only">Verification method</legend>
    <label class="auth-method">
      <input type="radio" name="mfa-method" value="app" checked>
      <span class="auth-method-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="6.5" y="2.5" width="11" height="19" rx="2.5"/><path d="M10.5 18.5h3"/><path d="M9.5 9.5h5M9.5 12.5h3"/></svg></span>
      <span class="auth-method-body">
        <span class="auth-method-title">Authenticator app <span class="badge badge-success badge-sm">Recommended</span></span>
        <span class="auth-method-text">A 6 digit code from an app like 1Password or Google Authenticator</span>
        <span class="auth-method-meta">Last used 2 days ago</span>
<!-- 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.
InteractiveColor pickerA saturation and brightness area, hue and opacity sliders, a hex, rgb or oklch field, swatches and the eyedropper where the browser has one, over a native color input. Needs monsoon.js.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.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.Two factor and sign inVerify screenThe 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.

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.