[demolaf]

Closes #1505.

Adds a show/hide password toggle to SignInAuthForm and SignUpAuthForm in React, Angular and shadcn. It is always on, with no opt-out.

⚠️ Breaking Changes

• The shared field wrapper is now <div data-input-field> instead of <label>, with <label for> around the label text only. Custom CSS targeting .fui-form fieldset label input needs to target [data-input-field] instead.
• Tests that query the password field with getByLabelText(/password/i) now also match the toggle, so use an exact label.
• Clicking a field's description, error or empty space no longer focuses its input, since the wrapper is no longer a <label>.

Changes

• Eye icon button with a translated aria-label ("Show password" / "Hide password"). The new showPassword and hidePassword labels are translated in all 42 locales, and the toggle sits at the inline end so it works right to left.
• No interactive control (toggle, forgot password, country selector) sits inside a <label> any more. In the React and Angular components, descriptions and errors are linked to the input with aria-describedby.
• The password is hidden again on submit, and spellcheck and autocorrect are off on the field.
• shadcn gets a password-input registry component, and the shadcn example copies are updated.

Preview

Sign in: reveal, hide, and hidden again on submit

password-toggle-sign-in.mp4

Sign up: same flow on the new-password field

password-toggle-sign-up.mp4

[gemini-code-assist]

Code Review

This pull request introduces a new PasswordInput component with a show/hide toggle across React, Angular, and Shadcn implementations, along with updated styles, translations, and tests. A critical issue was identified in the React PasswordInput component where the ref prop is not properly forwarded or merged, causing external refs to be overwritten and ignored.

[russellwheatley]

Thanks for this @demolaf, the a11y cleanup around the label is a nice improvement. A few inline comments below.

One general point: the markup and CSS selector change is breaking, but the title is feat(forms). Might be worth checking the release tooling treats it as breaking and not a minor. There's also a behaviour change that isn't listed under Breaking Changes: clicking the description or empty space in the field wrapper no longer focuses the input, since the wrapper isn't a <label> any more.

[russellwheatley]

This fires on every submit event, including when validation fails, so someone who revealed the password to fix a typo gets it hidden again before they can retype. It matches "hidden again on submit" in the description, so it might well be intended. Just flagging it in case it feels jarring in practice. Same applies to the Angular and shadcn versions.

[demolaf]

Intentional, it follows NIST guidance to show the password only until it is submitted.

[revmarcuspeter-cyber]

One behavior change may be missing from Breaking Changes: previously, clicking the description or empty space in the field wrapper focused the input because the wrapper was a <label>. With the wrapper now a <div>, those clicks no longer focus it. Could we preserve that behavior and add a regression test, or confirm that the change is intentional and document it?

[demolaf]

@russellwheatley thanks for the review.

• Good call on the breaking change, the title is now feat(forms)!:.
• Added the lost click-to-focus on the description, error and empty space to Breaking Changes.

[demolaf]

@revmarcuspeter-cyber Intentional, it follows from moving the toggle and other controls out of the <label>, and it's now listed under Breaking Changes.