Components Password reveal

Last updated: 20 April 2022

Open this example (Password reveal (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.