This is an internal development app.
To learn how to use the GOV.UK Design System in your project, see Get started.

Skip to main content
  1. GOV.UK Frontend
  2. All components
  3. Password input

Password input

Password input

Open this example in a new tab: password input

Code

Markup

<div class="govuk-form-group govuk-password-input" data-module="govuk-password-input">
  <label class="govuk-label" for="password-input">
    Password
  </label>
  <div class="govuk-input__wrapper govuk-password-input__wrapper">
    <input class="govuk-input govuk-password-input__input govuk-js-password-input-input" id="password-input" name="password" type="password" spellcheck="false" autocomplete="current-password" autocapitalize="none">
    <button type="button" class="govuk-button govuk-button--secondary govuk-password-input__toggle govuk-js-password-input-toggle" data-module="govuk-button" aria-controls="password-input" aria-label="Show password" hidden>
      Show
    </button>
  </div>
</div>

Macro

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

{{ govukPasswordInput({
  label: {
    text: "Password"
  },
  id: "password-input",
  name: "password"
}) }}

Password input with hint text

Open this example in a new tab: password input with hint text

Code

Markup

<div class="govuk-form-group govuk-password-input" data-module="govuk-password-input">
  <label class="govuk-label" for="password-input-with-hint-text">
    Password
  </label>
  <div id="password-input-with-hint-text-hint" class="govuk-hint">
    It probably has some letters, numbers and maybe even some symbols in it.
  </div>
  <div class="govuk-input__wrapper govuk-password-input__wrapper">
    <input class="govuk-input govuk-password-input__input govuk-js-password-input-input" id="password-input-with-hint-text" name="test-name-2" type="password" spellcheck="false" aria-describedby="password-input-with-hint-text-hint" autocomplete="current-password" autocapitalize="none">
    <button type="button" class="govuk-button govuk-button--secondary govuk-password-input__toggle govuk-js-password-input-toggle" data-module="govuk-button" aria-controls="password-input-with-hint-text" aria-label="Show password" hidden>
      Show
    </button>
  </div>
</div>

Macro

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

{{ govukPasswordInput({
  label: {
    text: "Password"
  },
  hint: {
    text: "It probably has some letters, numbers and maybe even some symbols in it."
  },
  id: "password-input-with-hint-text",
  name: "test-name-2"
}) }}

Password input with error message

Open this example in a new tab: password input with error message

Code

Markup

<div class="govuk-form-group govuk-form-group--error govuk-password-input" data-module="govuk-password-input">
  <label class="govuk-label" for="password-input-with-error-message">
    Password
  </label>
  <div id="password-input-with-error-message-hint" class="govuk-hint">
    It probably has some letters, numbers and maybe even some symbols in it.
  </div>
  <p id="password-input-with-error-message-error" class="govuk-error-message">
    <span class="govuk-visually-hidden">Error:</span> Error message goes here
  </p>
  <div class="govuk-input__wrapper govuk-password-input__wrapper">
    <input class="govuk-input govuk-password-input__input govuk-js-password-input-input govuk-input--error" id="password-input-with-error-message" name="test-name-3" type="password" spellcheck="false" aria-describedby="password-input-with-error-message-hint password-input-with-error-message-error" autocomplete="current-password" autocapitalize="none">
    <button type="button" class="govuk-button govuk-button--secondary govuk-password-input__toggle govuk-js-password-input-toggle" data-module="govuk-button" aria-controls="password-input-with-error-message" aria-label="Show password" hidden>
      Show
    </button>
  </div>
</div>

Macro

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

{{ govukPasswordInput({
  label: {
    text: "Password"
  },
  hint: {
    text: "It probably has some letters, numbers and maybe even some symbols in it."
  },
  id: "password-input-with-error-message",
  name: "test-name-3",
  errorMessage: {
    text: "Error message goes here"
  }
}) }}

Password input with label as page heading

Open this example in a new tab: password input with label as page heading

Code

Markup

<div class="govuk-form-group govuk-password-input" data-module="govuk-password-input">
  <h1 class="govuk-label-wrapper">
    <label class="govuk-label govuk-label--l" for="password-input-with-page-heading">
      Password
    </label>
  </h1>
  <div class="govuk-input__wrapper govuk-password-input__wrapper">
    <input class="govuk-input govuk-password-input__input govuk-js-password-input-input" id="password-input-with-page-heading" name="test-name" type="password" spellcheck="false" autocomplete="current-password" autocapitalize="none">
    <button type="button" class="govuk-button govuk-button--secondary govuk-password-input__toggle govuk-js-password-input-toggle" data-module="govuk-button" aria-controls="password-input-with-page-heading" aria-label="Show password" hidden>
      Show
    </button>
  </div>
</div>

Macro

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

{{ govukPasswordInput({
  label: {
    text: "Password",
    classes: "govuk-label--l",
    isPageHeading: true
  },
  id: "password-input-with-page-heading",
  name: "test-name"
}) }}

Password input with input width class

Open this example in a new tab: password input with input width class

Code

Markup

<div class="govuk-form-group govuk-password-input" data-module="govuk-password-input">
  <label class="govuk-label" for="password-input-width">
    Password
  </label>
  <div class="govuk-input__wrapper govuk-password-input__wrapper">
    <input class="govuk-input govuk-password-input__input govuk-js-password-input-input govuk-input--width-10" id="password-input-width" name="password" type="password" spellcheck="false" autocomplete="current-password" autocapitalize="none">
    <button type="button" class="govuk-button govuk-button--secondary govuk-password-input__toggle govuk-js-password-input-toggle" data-module="govuk-button" aria-controls="password-input-width" aria-label="Show password" hidden>
      Show
    </button>
  </div>
</div>

Macro

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

{{ govukPasswordInput({
  label: {
    text: "Password"
  },
  id: "password-input-width",
  name: "password",
  classes: "govuk-input--width-10"
}) }}

Password input with new-password autocomplete

Open this example in a new tab: password input with new-password autocomplete

Supporting browsers and password managers should prompt to generate a password.

Code

Markup

<div class="govuk-form-group govuk-password-input" data-module="govuk-password-input">
  <label class="govuk-label" for="password-input-new-password">
    Password
  </label>
  <div class="govuk-input__wrapper govuk-password-input__wrapper">
    <input class="govuk-input govuk-password-input__input govuk-js-password-input-input" id="password-input-new-password" name="password" type="password" spellcheck="false" autocomplete="new-password" autocapitalize="none">
    <button type="button" class="govuk-button govuk-button--secondary govuk-password-input__toggle govuk-js-password-input-toggle" data-module="govuk-button" aria-controls="password-input-new-password" aria-label="Show password" hidden>
      Show
    </button>
  </div>
</div>

Macro

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

{{ govukPasswordInput({
  label: {
    text: "Password"
  },
  autocomplete: "new-password",
  id: "password-input-new-password",
  name: "password"
}) }}

Password input with translations

Open this example in a new tab: password input with translations

Code

Markup

<div class="govuk-form-group govuk-password-input" data-module="govuk-password-input" data-i18n.show-password="Datguddia" data-i18n.hide-password="Cuddio" data-i18n.show-password-aria-label="Datgelu cyfrinair" data-i18n.hide-password-aria-label="Cuddio cyfrinair" data-i18n.password-shown-announcement="Mae eich cyfrinair yn weladwy." data-i18n.password-hidden-announcement="Mae eich cyfrinair wedi&#39;i guddio.">
  <label class="govuk-label" for="password-translated">
    Cyfrinair
  </label>
  <div class="govuk-input__wrapper govuk-password-input__wrapper">
    <input class="govuk-input govuk-password-input__input govuk-js-password-input-input" id="password-translated" name="password-translated" type="password" spellcheck="false" autocomplete="current-password" autocapitalize="none">
    <button type="button" class="govuk-button govuk-button--secondary govuk-password-input__toggle govuk-js-password-input-toggle" data-module="govuk-button" aria-controls="password-translated" aria-label="Datgelu cyfrinair" hidden>
      Datguddia
    </button>
  </div>
</div>

Macro

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

{{ govukPasswordInput({
  label: {
    text: "Cyfrinair"
  },
  id: "password-translated",
  name: "password-translated",
  showPasswordText: "Datguddia",
  hidePasswordText: "Cuddio",
  showPasswordAriaLabelText: "Datgelu cyfrinair",
  hidePasswordAriaLabelText: "Cuddio cyfrinair",
  passwordShownAnnouncementText: "Mae eich cyfrinair yn weladwy.",
  passwordHiddenAnnouncementText: "Mae eich cyfrinair wedi'i guddio."
}) }}