Structure
| Class | Example |
|---|---|
|
.mdst-password-input .mdst-input .mdst-password-input__field .mdst-password-input__toggle |
|
States
| Attribute | Example |
|---|---|
| placeholder |
|
| disabled |
|
Multiple Instances
No JavaScript required. The toggle is a checkbox styled with appearance: none and a CSS mask-image eye icon. Clicking it checks/unchecks the checkbox, and :has(:checked) swaps the field masking via -webkit-text-security. Each instance is self-contained — no IDs needed, multiple inputs work independently on the same page.
Usage
<!-- Basic password input -->
<div class="mdst-password-input">
<input type="text" autocomplete="current-password" class="mdst-input mdst-password-input__field" placeholder="Enter password" />
<input type="checkbox" class="mdst-password-input__toggle" name="password-toggle" aria-label="Toggle password visibility" />
</div>
<!-- Disabled -->
<div class="mdst-password-input">
<input type="text" autocomplete="current-password" class="mdst-input mdst-password-input__field" placeholder="Disabled" disabled />
<input type="checkbox" class="mdst-password-input__toggle" name="password-toggle" aria-label="Toggle password visibility" disabled />
</div>
<!-- Multiple instances (no IDs needed) -->
<div class="mdst-password-input">
<input type="text" autocomplete="current-password" class="mdst-input mdst-password-input__field" placeholder="Current password" />
<input type="checkbox" class="mdst-password-input__toggle" name="password-toggle" aria-label="Toggle password visibility" />
</div>
<div class="mdst-password-input">
<input type="text" autocomplete="new-password" class="mdst-input mdst-password-input__field" placeholder="New password" />
<input type="checkbox" class="mdst-password-input__toggle" name="password-toggle" aria-label="Toggle password visibility" />
</div>