Password input
Usage
Use a password input for sign-in and for setting a new password on the Fleetline workshop tablet or dispatch console. Use a one-time-code input for SMS or authenticator codes.
- Always offer Show: mechanics type with gloves on shared tablets and need to check what they typed.
autocomplete="current-password"on sign-in,"new-password"when creating one, so password managers fill or generate correctly.- When creating a password, list the requirements up front and show strength as a bar and a word.
- Never block paste — it is how password managers work.
Anatomy
- Container —
.input.input--affixed.password(from text field) - Input —
input.input__control[type=password] - Reveal toggle —
button.password__toggle[aria-pressed], icon + "Show" / "Hide" - Strength (optional) —
meter.password__meter+.password__strength-text - Requirements (optional) —
ul.password__rules, items withdata-met
Examples
Hover and focus-visible are frozen with .is-hover and .is-focus-visible, which share their rules with the real pseudo-classes.
Password input
Error: Enter your password.
Use at least 12 characters. A short phrase is easier to type on a tablet.
- At least 12 characters
- A number
- A symbol, like ! or #
<div class="input input--affixed password">
<input class="input__control" id="password" type="password" autocomplete="current-password">
<!-- ships hidden; js/password-input.js reveals it and switches type + aria-pressed + label -->
<button type="button" class="password__toggle" aria-controls="password" aria-pressed="false" hidden>
<svg class="icon" aria-hidden="true"><use href="#icon-eye"></use></svg><span data-label>Show</span><span class="sr-only"> password</span>
</button>
</div>
<!-- Strength + requirements (new passwords) -->
<input class="input__control" type="password" autocomplete="new-password" data-strength="pw-meter" data-rules="pw-rules">
<div class="password__strength">
<meter class="password__meter" id="pw-meter" min="0" max="4" low="2" high="3" optimum="4" value="0"></meter>
<span class="password__strength-text" data-strength-text></span>
</div>
<ul class="password__rules" id="pw-rules">
<li data-rule="length:12">…At least 12 characters</li>
<li data-rule="digit">…A number</li>
</ul>API
| Hook | Values | Purpose |
|---|---|---|
.password | block class (with .input--affixed) | Password field with an inline toggle |
.password__toggle | part | Reveal button; aria-pressed true while visible; aria-controls → input id |
autocomplete | current-password | new-password | Password manager behavior |
data-strength | meter id | Drives meter.password__meter (0–4) and its text |
data-rules | list id | Updates li[data-rule] → data-met; rules: length:N, digit, upper, symbol |
aria-invalid="true" | attribute | Invalid styling (on the input) |
.is-hover | .is-focus-visible | docs-only class | Freezes a toggle state |
Do and don't
Accessibility
| Key | Behavior |
|---|---|
| Tab | Input, then the Show button |
| Enter / Space on the toggle | Shows or hides the password; focus stays on the toggle |
- The toggle is a real
buttonnamed "Show password" (visible "Show" + visually hidden " password") witharia-pressed, so screen readers announce "Show password, toggle button, pressed". - The password is hidden again on submit so it never lands in form history as plain text.
- Strength is a native
meterwith text ("Good"); requirement changes are announced politely after a typing pause, as "2 of 3 requirements met". - Requirements use a check or an empty circle icon plus text — not color alone.
- Without JavaScript the toggle stays hidden and the field is a plain password input.
Tokens
| Custom property | Purpose |
|---|---|
--input-*, --focus-ring-* | Field border and focus (from text field) |
--color-action-ghost-bg | -hover | -active, --color-action-ghost-fg | Toggle button |
--color-feedback-success|warning|danger-icon | Meter fill by strength |
--color-feedback-success-fg | Met requirement |
--color-bg-muted | Meter track |