Monsoon v0.2.0
Made by Alexandre Kohler Star

Two factor and sign in

Verification code

One cell per character on top of the CSS only .otp-field: auto advance, Backspace goes back, arrows, Home and End, paste or SMS autofill of the whole code from any cell (spaces and dashes are stripped), error shake and success states, masked mode and a monsoon:otp-complete event. The field stays in the form with the full value. Needs monsoon.js.

Two factor and sign in5 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-otp

Options

OptionDescription
data-m-otp-length="6" (4 to 8, or the field maxlength)
data-m-otp-separator="3" (a dash after cell 3, or "2,4")
data-m-otp-type="alphanumeric" (letters and digits, shown upper case)
data-m-otp-pattern="[0-9a-f]" (any one character class)
data-m-otp-masked (dots instead of characters)
data-m-otp-autosubmit (submits the form when complete)
data-m-otp-webotp (reads the SMS with the WebOTP API where supported)
data-m-otp-name="code" (field name when the markup has no field)

Methods

MethodDescription
Monsoon.otp(el).value
Monsoon.otp(el).value = "482913"
Monsoon.otp(el).complete
Monsoon.otp(el).error(clear)
Monsoon.otp(el).success()
Monsoon.otp(el).reset()
Monsoon.otp(el).clear()
Monsoon.otp(el).focus()
Monsoon.otp(el).disabled = true

Events

EventDescription
monsoon:otp-change { value, complete }
monsoon:otp-complete { code }

Classes

5 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
Base Base class of the verification code. On a <div> in the example. Sets flex display, alignment, gap, width, absolute position and offsets, and 7 custom properties.
CSS
.otp[data-disabled] > .otp-separator {
  opacity: var(--m-disabled-opacity);
}

.otp[data-state=success] {
  --field-border: var(--success);
  --field-tone: var(--success);
}
Part Part of the verification code. On an <input> in the example. Sets block display, width, height, padding, text size and text style, and 13 custom properties.
CSS
.otp-field:focus {
  --_slot: color-mix(in oklab, var(--tone) 70%, transparent);
}

.otp-field::placeholder {
  color: color-mix(in oklab, var(--muted-foreground) 55%, transparent);
}
Modifier Modifier, combined with the otp class. Not used in the example above. Sets block display, width, height, padding, text size and text style, and 10 custom properties.
CSS
.otp-input::selection {
  background-color: transparent;
}

.otp-input[data-filled] {
  --_line: var(--field-border, color-mix(in oklab, var(--tone) 45%, var(--border)));
}
Modifier Modifier, combined with the otp class. Not used in the example above. Sets alignment, width, height, corner radius and background.
CSS
.otp-separator {
  flex: none;
  width: calc(var(--otp-size) * .24);
  height: 2px;
  border-radius: 1px;
  background-color: color-mix(in oklab, var(--foreground) 28%, transparent);
}

.otp[data-disabled] > .otp-separator {
  opacity: var(--m-disabled-opacity);
}
Modifier Modifier, combined with the otp class. On a <div> in the example. A hook for state rules such as .otp-masked > .otp-input.
CSS
.otp-masked > .otp-input, .otp-masked > .otp-field {
  -webkit-text-security: disc;
}

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>

<!-- Verification code: start from the base class, then add modifiers -->
<div class="grid gap-5">
  <div class="otp" data-m-otp data-m-otp-separator="3">
  <input class="otp-field" name="code" maxlength="6" inputmode="numeric" autocomplete="one-time-code" aria-label="Verification code">
</div>
  <div class="otp otp-lg otp-primary" data-m-otp data-m-otp-length="8" data-m-otp-type="alphanumeric" data-m-otp-separator="4">
  <input class="otp-field" name="recovery" maxlength="8" inputmode="text" autocomplete="one-time-code" aria-label="Recovery code">
</div>
  <div class="flex flex-wrap items-center gap-4">
    <div class="otp otp-sm otp-masked" data-m-otp data-m-otp-length="4">
      <input class="otp-field" name="pin" maxlength="4" inputmode="numeric" autocomplete="one-time-code" aria-label="PIN">
    </div>
    <div class="otp otp-sm" data-m-otp data-m-otp-length="4" data-m-otp-disabled>
      <input class="otp-field" name="locked" maxlength="4" inputmode="numeric" value="2580" aria-label="Locked code" disabled>
    </div>
<!-- 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.
  • 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.
FormsOne time codeA verification code field. Without JavaScript it is one input with spaced monospace characters over slot marks, so typing, paste and SMS autofill (autocomplete="one-time-code") work natively. Add data-m-otp and monsoon.js to get one cell per character (see Two factor and sign in).Two factor and sign inAuthenticator app setupTwo step setup for a time based authenticator: a QR code drawn in the browser from an otpauth:// URI (no image, no dependency), the setup key in groups of four with a copy button behind a "Can't scan the code?" disclosure, then the first code to confirm. Needs monsoon.js for the QR code and the code cells.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.

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.