Components Password reveal

Last updated: 11 October 2022

Open this example in a new window

<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!"
}) }}

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.