Password or password and search component

[Camulos]

Password-component (or combined search and password in one component, rename to communicate function and not use?

Password field need clear show/hide functionality, preferably using a button similar to what we now have used for Search-component. The search-component is a bit too specific and may result in designers not thinking of using it for password. To change text-field component in Figma, you may need to detach the instance to set up the functionality.
Text-field set to type="password" will show an clickable icon, this icon is hidden when long passwords and may only show on mouseover, not very accessible. "button" would be better.

gov.uk links about password-component:

• https://design-system.service.gov.uk/components/password-input/
• Password input alphagov/govuk-design-system-backlog#240

[Barsnes]

combined search and password in one component

This comes with some problems. We want to stay as close to HTML as possible, and doing this potentially means the consumer would need to do a lot of configuring.

Text-field set to type="password" will show an clickable icon

This is not the case for everyone. On windows in chrome, nothings shows up.
From MDN:

The precise behavior of the entry process may vary from browser to browser. Some browsers display the typed character for a moment before obscuring it, while others allow the user to toggle the display of plain-text on and off.

ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/password#:~:text=The%20precise%20behavior%20of%20the%20entry%20process%20may%20vary%20from%20browser%20to%20browser.%20Some%20browsers%20display%20the%20typed%20character%20for%20a%20moment%20before%20obscuring%20it%2C%20while%20others%20allow%20the%20user%20to%20toggle%20the%20display%20of%20plain%2Dtext%20on%20and%20off

---

That said, I believe it is uncommon for a password input to have a clear button.
Some sites do have a button to show/hide the typed password, and some browsers give this out of the box.
I think a pattern, or some general guidelines here is better than a component, since there are a lot of opinions on how it should be displayed and function.

• Should the toggle button be an icon? text?
• Should it visually be inside the input? outside? under?

The problems you mention with Figma is not an issue in code, since we have a standalone Input component, which is just an input.

To implement this, you make a button that toggle type on an input between password/text