Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProThe change-password form with current, new and confirm fields, one message per rule on the right field, focus on the first problem and a server error shown on the current password.
Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.
Use this on the security page of an account, where a person already signed in changes their password.
Do not use it for forgotten passwords (use a reset link flow) or ask for the current password when the person arrived through a reset link.
This item is part of tealmac UI Pro
The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.
| Prop | Type | Default | Description |
|---|---|---|---|
onChange | (current, next) => Promise<string | void> | - | Resolve a message to show it on the current password field, or nothing on success. |
minLength | number | 10 | Fewest characters in the new password. |
aria-describedby; fields get aria-invalid.current-password, the new ones new-password.| Key | Action |
|---|---|
| Enter | submits |
| Tab | through the three fields and the button |
The pattern ships a Testing Library test (password-change-form.test.tsx) that covers autocomplete tokens, per-rule messages and focus, the same-password rule, a server message and success.