Components Password reveal

Last updated: 8 January 2024

<div class="govuk-form-group">
  <label class="govuk-label govuk-label--m" for="password">
    Password
  </label>

  <input class="govuk-input govuk-input--width-20" id="password" name="password" type="password" value="1234ABC!" data-module="moj-password-reveal">

</div>

{%- from "govuk/components/input/macro.njk" import govukInput -%}

{{ govukInput({
  id: "password",
  attributes: {"data-module": "moj-password-reveal"},
  classes: "govuk-input--width-20",
  name: "password",
  type: "password",
  label: {
    text: "Password",
    classes: 'govuk-label--m'
  },
  value: "1234ABC!"
}) }}

To use the component in your design, add the MoJ Figma Kit to your Figma libraries and find the component using the Assets tab.

View component in MoJ Figma Kit

When to use

Use the password reveal component to let users check their password safely.

This component automatically sets the spellcheck attribute to false to prevent users' passwords being stored in their browsers.