Monsoon v0.2.0
Made by Alexandre Kohler Star

Forms

One time code

A 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).

Forms23 classesNo JavaScriptLight and dark

Example

Full

Classes

23 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 one time 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 one time 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. Not used in the example above. A hook for state rules such as .otp-masked > .otp-input.
CSS
.otp-masked > .otp-input, .otp-masked > .otp-field {
  -webkit-text-security: disc;
}
Tone Primary tone. On a <div> in the example. Sets --field-tone.
CSS
.otp-primary {
  --field-tone: var(--primary);
}
Tone Secondary tone. Not used in the example above. Sets --field-tone.
CSS
.otp-secondary {
  --field-tone: var(--secondary);
}
Tone Accent tone. Not used in the example above. Sets --field-tone.
CSS
.otp-accent {
  --field-tone: var(--accent);
}
Tone Neutral tone. Not used in the example above. Sets --field-tone.
CSS
.otp-neutral {
  --field-tone: var(--foreground);
}
Tone Success tone. Not used in the example above. Sets --field-tone.
CSS
.otp-success {
  --field-tone: var(--success);
}
Tone Warning tone. Not used in the example above. Sets --field-tone.
CSS
.otp-warning {
  --field-tone: var(--warning);
}
Tone Danger tone. Not used in the example above. Sets --field-tone.
CSS
.otp-danger {
  --field-tone: var(--danger);
}
Tone Info tone. Not used in the example above. Sets --field-tone.
CSS
.otp-info {
  --field-tone: var(--info);
}
Size Extra small size. Not used in the example above. Sets --otp-size and --field-radius.
CSS
.otp-xs {
  --otp-size: 2rem;
  --field-radius: var(--m-radius-sm);
}
Size Small size. On a <div> in the example. Sets --otp-size and --field-radius.
CSS
.otp-sm {
  --otp-size: 2.375rem;
  --field-radius: var(--m-radius-md);
}
Size Medium, the default size. Not used in the example above. Sets --otp-size and --field-radius.
CSS
.otp-md {
  --otp-size: 2.75rem;
  --field-radius: var(--m-radius-lg);
}
Size Large size. Not used in the example above. Sets --otp-size and --field-radius.
CSS
.otp-lg {
  --otp-size: 3.25rem;
  --field-radius: var(--m-radius-xl);
}
Size Extra large size. Not used in the example above. Sets --otp-size and --field-radius.
CSS
.otp-xl {
  --otp-size: 3.75rem;
  --field-radius: var(--m-radius-2xl);
}
Modifier Modifier, combined with the otp class. On a <div> in the example. Sets --otp-length.
CSS
.otp-4 {
  --otp-length: 4;
}
Modifier Modifier, combined with the otp class. Not used in the example above. Sets --otp-length.
CSS
.otp-5 {
  --otp-length: 5;
}
Modifier Modifier, combined with the otp class. Not used in the example above. Sets --otp-length.
CSS
.otp-6 {
  --otp-length: 6;
}
Modifier Modifier, combined with the otp class. Not used in the example above. Sets --otp-length.
CSS
.otp-7 {
  --otp-length: 7;
}
Modifier Modifier, combined with the otp class. On a <div> in the example. Sets --otp-length.
CSS
.otp-8 {
  --otp-length: 8;
}

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">

<!-- One time code: start from the base class, then add modifiers -->
<div class="grid gap-5">
  <div class="field">
    <label class="label" for="otp-sms">Code from the text message</label>
    <div class="otp">
      <input id="otp-sms" class="otp-field" name="code" value="4829" inputmode="numeric" autocomplete="one-time-code" maxlength="6" pattern="[0-9]{6}" spellcheck="false" aria-describedby="otp-sms-hint">
    </div>
    <p class="hint" id="otp-sms-hint">Type or paste the 6 digits we sent to your phone.</p>
  </div>
  <div class="flex flex-wrap items-center gap-4">
    <div class="otp otp-4 otp-sm otp-primary">
      <input class="otp-field" type="password" name="pin" inputmode="numeric" autocomplete="off" maxlength="4" aria-label="Card PIN" value="1234">
    </div>
    <div class="otp otp-8 otp-sm">
      <input class="otp-field" name="recovery" autocomplete="off" maxlength="8" aria-label="Recovery code" value="K7Q2" spellcheck="false">
<!-- 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.
Two factor and sign inVerification codeOne 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.FormsColor inputA native color picker shown as a rounded swatch.FormsRatingStar rating built from a radio group, with hover preview and keyboard support.FormsFieldLabel, control, hint and error message. The error shows on :user-invalid or aria-invalid, and field tones color the control and hint.

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.