Components Password reveal
Last updated: 11 October 2022
<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.