Password
A password box with show / hide, and, for new passwords, a strength meter and the rules the password must meet. Specification: docs/components/password.md.
Most examples stand alone, named with aria-label; the live example at the end uses Fields, with labels and messages.
Box × size
Empty, hidden and shown. The eye button switches the input between type="password" and type="text" and sets aria-pressed (canon.js).
sm
md
lg
theme decides
States
Error (aria-invalid="true"), warning and success (data-intent on the box), and disabled.
Strength
A native <meter> from 0 to 4: empty, weakest, weak, medium, strong. Your app scores the password and sets value and the word in aria-valuetext.
Strength word
Optional: the word under the bar, in the bar's color. Mark it aria-hidden="true": the meter already says it to screen readers.
Rules
Each rule is pending, met (data-state="met") or failed after a submit (data-state="error"). Screen readers hear "Met:" or "Not met:" before each one.
Password must contain:
- at least 8 characters
- at least 1 number
- at least 1 lowercase letter
- at least 1 uppercase letter
- at least 1 special character
Password must contain:
- at least 8 characters
- at least 1 number
- at least 1 lowercase letter
- at least 1 uppercase letter
- at least 1 special character
Password must contain:
- at least 8 characters
- at least 1 number
- at least 1 lowercase letter
- at least 1 uppercase letter
- at least 1 special character
Together
Box, strength and rules together. The input lists the meter and the rules in aria-describedby, so they are read when it gets focus.
Password must contain:
- at least 8 characters
- at least 1 number
- at least 1 lowercase letter
- at least 1 uppercase letter
- at least 1 special character
Password must contain:
- at least 8 characters
- at least 1 number
- at least 1 lowercase letter
- at least 1 uppercase letter
- at least 1 special character
Password must contain:
- at least 8 characters
- at least 1 number
- at least 1 lowercase letter
- at least 1 uppercase letter
- at least 1 special character
Live, with canon.js
Everything canon.js adds, working:
- Rules with
data-ruleare checked as you type, and the form can't be submitted until they are met. - With
data-reveal="focus", the rules open while they matter and close once they are all met. - With
data-score="rules", the meter is scored from the rules met. - The sparkles button generates a strong password and fills the confirmation too.
- Turn on Caps Lock while typing to see the warning.
- The confirmation (
data-match) turns green when it matches. - Problems show as each field's error message: submit, or leave a changed field that is still wrong.
Edge cases
Right-to-left
يجب أن تحتوي كلمة المرور على:
- 8 أحرف على الأقل
- رقم واحد على الأقل
- رمز خاص واحد على الأقل
Long rules in a narrow column
Password must contain:
- at least 12 characters, or 8 if it also has a number and a symbol
- none of the last five passwords you used on this account