Two factor and sign in

New password

Password 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.

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

new-password.html

<div class="field max-w-md" data-m-auth-password data-m-auth-password-min="12" data-m-auth-password-context="you,example">
  <label class="label" for="new-password">New password</label>
  <div class="password-field">
    <input id="new-password" type="password" class="input" name="new_password" value="Monsoon-rain" autocomplete="new-password">
    <button type="button" class="password-field-toggle" aria-pressed="false" aria-label="Show password"></button>
  </div>
  <div class="auth-strength" aria-hidden="false">
    <span class="auth-strength-bar"></span><span class="auth-strength-bar"></span><span class="auth-strength-bar"></span><span class="auth-strength-bar"></span>
    <span class="auth-strength-label"></span>
  </div>
  <ul class="auth-rules" aria-label="Password rules">
    <li class="auth-rule" data-rule="length">At least 12 characters</li>
    <li class="auth-rule" data-rule="lower">A lower case letter</li>
    <li class="auth-rule" data-rule="upper">An upper case letter</li>
    <li class="auth-rule" data-rule="number">A number</li>
    <li class="auth-rule" data-rule="symbol">A symbol like ! or #</li>
    <li class="auth-rule" data-rule="common">Not a common password</li>
  </ul>
</div>

JavaScript API

Attribute

data-m-auth-password

Options

Option	Description
`data-m-auth-password-min="12"`
`data-m-auth-password-context="you,example" (words the password must not contain)`
`data-rule="length \| lower \| upper \| number \| symbol \| common" on each .auth-rule`

Methods

Method	Description
`Monsoon.authPassword(el).score (0 to 4)`
`Monsoon.authPassword(el).check() (rules, score, label, valid)`

Events

Event	Description
`monsoon:auth-password { score, label, rules, valid }`

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.

Class	Type	What it does
	Base	Base class of the new password. On a <div> in the example. Sets grid display, grid tracks, alignment, gap and background, and 5 custom properties. CSS `.auth-strength[data-score="2"] { --tone: var(--warning); } .auth-strength[data-score="4"] { --tone: var(--success); }`
	Part	Part of the new password. On a <span> in the example. Sets height, background, corner radius and transition. CSS `.auth-strength-bar { height: .3125rem; background-color: color-mix(in oklab, var(--foreground) 10%, var(--surface)); border-radius: var(--m-radius-full); transition: background-color var(--m-duration) var(--m-ease); } @media (prefers-reduced-motion: reduce) { .auth-flow-step::before, .auth-strength-bar, .auth-method, .auth-method > input, .auth-secret-toggle::after, .phone-input-country::after, .auth-rule, .auth-rule::before { transition: none; } }`
	Part	Part of the new password. On a <span> in the example. Sets height, text size, font weight, text style and text color. CSS `.auth-strength-label { min-height: 1lh; font-size: .75rem; font-weight: 600; text-align: end; color: var(--tone); }`
	Part	Part of the new password. On an <ul> in the example. Sets grid display, grid tracks, gap, margin and padding. CSS `.auth-rules { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 11.5rem), 1fr)); gap: .375rem 1rem; margin: 0; padding: 0; list-style: none; }`
	Part	Part of the new password. On a <li> in the example. Sets flex display, alignment, gap, text size, text color and transition. CSS `.auth-rule[data-met] { color: var(--foreground); } .auth-rule { display: flex; align-items: center; gap: .5rem; font-size: .8125rem; color: var(--muted-foreground); transition: color var(--m-duration-fast); }`

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>

<!-- New password: start from the base class, then add modifiers -->
<div class="field max-w-md" data-m-auth-password data-m-auth-password-min="12" data-m-auth-password-context="you,example">
  <label class="label" for="new-password">New password</label>
  <div class="password-field">
    <input id="new-password" type="password" class="input" name="new_password" value="Monsoon-rain" autocomplete="new-password">
    <button type="button" class="password-field-toggle" aria-pressed="false" aria-label="Show password"></button>
  </div>
  <div class="auth-strength" aria-hidden="false">
    <span class="auth-strength-bar"></span><span class="auth-strength-bar"></span><span class="auth-strength-bar"></span><span class="auth-strength-bar"></span>
    <span class="auth-strength-label"></span>
  </div>
  <ul class="auth-rules" aria-label="Password rules">
    <li class="auth-rule" data-rule="length">At least 12 characters</li>
    <li class="auth-rule" data-rule="lower">A lower case letter</li>
    <li class="auth-rule" data-rule="upper">An upper case letter</li>
<!-- 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.

#Example

#JavaScript API

#Classes

#Usage

#Accessibility

#Related components

Example

JavaScript API

Classes

Usage

Accessibility

Related components