Monsoon v0.2.0
Made by Alexandre Kohler Star

Interactive

Password strength

Wires the .password-field reveal button (aria-pressed and the label follow) and scores the password from length, variety and common patterns into a four step meter with a live label. Needs monsoon.js.

Interactive5 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-password

Options

OptionDescription
a .password-strength element inside, or data-m-password-meter="#id"

Methods

MethodDescription
Monsoon.password(el).score (0 to 4)
Monsoon.password(el).reveal(true)

Events

EventDescription
monsoon:strength { score, label }

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
Part Part of the password strength. On a <div> in the example. Sets block display, padding and hidden by default.
CSS
.password-field > .input::-ms-reveal {
  display: none;
}

.password-field {
  position: relative;
  display: block;
}
Part Part of the password strength. On a <button> in the example. Sets absolute position, offsets, grid display, alignment, width and text color.
CSS
.password-field-toggle:hover {
  color: var(--foreground);
}

.password-field-toggle:focus-visible {
  outline: var(--m-ring);
  outline-offset: calc(-2 * var(--m-ring-width));
}
Base Base class of the password strength. On a <div> in the example. Sets grid display, grid tracks, alignment, gap and background, and 4 custom properties.
CSS
.password-strength[data-score="2"] {
  --_tone: var(--warning);
}

.password-strength[data-score="0"], .password-strength[data-score="1"] {
  --_tone: var(--danger);
}
Modifier Modifier, combined with the password-strength class. Not used in the example above. Sets height, background, corner radius and transition.
CSS
.password-strength-bar {
  height: .25rem;
  background-color: color-mix(in oklab, var(--foreground) 11%, var(--surface));
  border-radius: var(--m-radius-full);
  transition: background-color var(--m-duration);
}

.password-strength[data-score="0"] > .password-strength-bar:nth-child(1), .password-strength[data-score="1"] > .password-strength-bar:nth-child(1), .password-strength[data-score="2"] > .password-strength-bar:nth-child(-n + 2), .password-strength[data-score="3"] > .password-strength-bar:nth-child(-n + 3), .password-strength[data-score="4"] > .password-strength-bar {
  background-color: var(--_tone);
}
Modifier Modifier, combined with the password-strength class. Not used in the example above. Sets padding, text size, font weight, text style and text color.
CSS
.password-strength-label {
  padding-inline-start: .5rem;
  font-size: .75rem;
  font-weight: 500;
  text-align: end;
  color: color-mix(in oklab, var(--_tone), var(--foreground) 25%);
}

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>

<!-- Password strength: start from the base class, then add modifiers -->
<div class="field max-w-sm" data-m-password>
  <label class="label" for="pw-new">New password</label>
  <div class="password-field">
    <input type="password" id="pw-new" class="input" autocomplete="new-password" value="monsoon">
    <button type="button" class="password-field-toggle" aria-pressed="false" aria-label="Show password"></button>
  </div>
  <div class="password-strength"></div>
</div>

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.
  • 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.
FormsPassword fieldA password input with a reveal button. The button needs a few lines of JavaScript: toggle aria-pressed on it and switch the input type between password and text.Two factor and sign inNew passwordPassword with a reveal toggle, a four step strength meter and a live rule checklist: length, lower and upper case, a number, a symbol, and not a common password, keyboard run or repeated character. Needs monsoon.js.InteractiveSplit panesResizable panes side by side or stacked: drag the separator, or focus it and use the arrows (Shift for bigger steps), Home, End and Enter to collapse. Minimum sizes, and sizes saved in localStorage when asked. Needs monsoon.js.InteractiveToast managerMonsoon.toast("Saved", { tone: "success" }) shows a toast in a polite live region. Toasts stack per position, pause while hovered or focused, can carry an action and can be swiped away. A button can show one with data-m-toast. Needs monsoon.js.

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.