Password input

[sarawilcox]

GOV.UK has a password input component to help users to create and enter passwords. https://design-system.service.gov.uk/components/password-input/

[paulrobertlloyd]

The Manage vaccinations in schools (Mavis) service has implemented this pattern. We’re largely importing this component as is, swapping out the govuk-* for the nhsuk-* namespace where relevant.

We’ve also made a few changes to make the secondary button component work for this use case, namely:

• Using a normal font weight
• Adjusting margin, padding and shadow sizing so that the button aligns with the input (and appears correctly when pressed). This is one area where the NHS.UK Design System’s button component is currently lacking; supporting the Password input component might be an opportunity to provide a smaller button variant that can be used alongside text inputs.

Without the adjustments:

With the adjustments:

The SCSS file that implements these adjustments can be found here: https://github.com/nhsuk/manage-vaccinations-in-schools/blob/main/app/assets/stylesheets/_password-input.scss

[edwardhorsford]

NHS Login has a show/hide feature:

Implemented as a button element positioned over the input.

Note the actual input has right padding so the field scrolls before being obscured by the button: