Archive

Password reveal

Archived

Archived in November 2024.

How ‘archived’ components work

This component is no longer being supported and should not be used. Read about all the Design System statuses.

Important

This component is archived

This component was archived because the GOV.UK Design System password input enables users to check their password safely. There’s also the GOV.UK Design System ‘Ask users for passwords’ pattern.

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.