Password field

#Example

<div class="password-field max-w-sm">
  <input type="password" class="input" value="correct horse" autocomplete="current-password" aria-label="Password">
  <button type="button" class="password-field-toggle" aria-pressed="false" aria-label="Show password"></button>
</div>

#Classes

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

.password-field > .input::-ms-reveal {
  display: none;
}

.password-field {
  position: relative;
  display: block;
}

.password-field-toggle:hover {
  color: var(--foreground);
}

.password-field-toggle:focus-visible {
  outline: var(--m-ring);
  outline-offset: calc(-2 * var(--m-ring-width));
}

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

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

<!-- Password field: start from the base class, then add modifiers -->
<div class="password-field max-w-sm">
  <input type="password" class="input" value="correct horse" autocomplete="current-password" aria-label="Password">
  <button type="button" class="password-field-toggle" aria-pressed="false" aria-label="Show password"></button>
</div>

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

#Related components